Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete

 Conflicts:

	src/components/structures/LoggedInView.tsx

	src/components/views/rooms/BasicMessageComposer.tsx

	src/editor/autocomplete.ts

src/components/views/auth/AuthBody.js

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.auth.AuthBody")
 export default class AuthBody extends React.PureComponent {
     render() {
         return <div className="mx_AuthBody">

src/components/views/auth/AuthFooter.js

@@ -18,7 +18,9 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.auth.AuthFooter")
 export default class AuthFooter extends React.Component {
     render() {
         return (

src/components/views/auth/AuthHeader.js

@@ -18,7 +18,9 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.auth.AuthHeader")
 export default class AuthHeader extends React.Component {
     static propTypes = {
         disableLanguageSelector: PropTypes.bool,

src/components/views/auth/AuthHeaderLogo.js

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.auth.AuthHeaderLogo")
 export default class AuthHeaderLogo extends React.PureComponent {
     render() {
         return <div className="mx_AuthHeaderLogo">

src/components/views/auth/CaptchaForm.js

@@ -18,12 +18,14 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
 /**
  * A pure UI component which displays a captcha form.
  */
+@replaceableComponent("views.auth.CaptchaForm")
 export default class CaptchaForm extends React.Component {
     static propTypes = {
         sitePublicKey: PropTypes.string,

src/components/views/auth/CompleteSecurityBody.js

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.auth.CompleteSecurityBody")
 export default class CompleteSecurityBody extends React.PureComponent {
     render() {
         return <div className="mx_CompleteSecurityBody">

src/components/views/auth/CountryDropdown.js

@@ -22,6 +22,7 @@ import * as sdk from '../../../index';
 import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
@@ -40,6 +41,7 @@ function countryMatchesSearchQuery(query, country) {
     return false;
 }
 
+@replaceableComponent("views.auth.CountryDropdown")
 export default class CountryDropdown extends React.Component {
     constructor(props) {
         super(props);

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -26,6 +26,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -75,6 +76,7 @@ import CountlyAnalytics from "../../../CountlyAnalytics";
 
 export const DEFAULT_PHASE = 0;
 
+@replaceableComponent("views.auth.PasswordAuthEntry")
 export class PasswordAuthEntry extends React.Component {
     static LOGIN_TYPE = "m.login.password";
 
@@ -167,12 +169,13 @@ export class PasswordAuthEntry extends React.Component {
                         { submitButtonOrSpinner }
                     </div>
                 </form>
-            { errorSection }
+                { errorSection }
             </div>
         );
     }
 }
 
+@replaceableComponent("views.auth.RecaptchaAuthEntry")
 export class RecaptchaAuthEntry extends React.Component {
     static LOGIN_TYPE = "m.login.recaptcha";
 
@@ -235,6 +238,7 @@ export class RecaptchaAuthEntry extends React.Component {
     }
 }
 
+@replaceableComponent("views.auth.TermsAuthEntry")
 export class TermsAuthEntry extends React.Component {
     static LOGIN_TYPE = "m.login.terms";
 
@@ -371,7 +375,7 @@ export class TermsAuthEntry extends React.Component {
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                                   onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
         }
 
         return (
@@ -385,6 +389,7 @@ export class TermsAuthEntry extends React.Component {
     }
 }
 
+@replaceableComponent("views.auth.EmailIdentityAuthEntry")
 export class EmailIdentityAuthEntry extends React.Component {
     static LOGIN_TYPE = "m.login.email.identity";
 
@@ -432,6 +437,7 @@ export class EmailIdentityAuthEntry extends React.Component {
     }
 }
 
+@replaceableComponent("views.auth.MsisdnAuthEntry")
 export class MsisdnAuthEntry extends React.Component {
     static LOGIN_TYPE = "m.login.msisdn";
 
@@ -578,6 +584,7 @@ export class MsisdnAuthEntry extends React.Component {
     }
 }
 
+@replaceableComponent("views.auth.SSOAuthEntry")
 export class SSOAuthEntry extends React.Component {
     static propTypes = {
         matrixClient: PropTypes.object.isRequired,
@@ -708,6 +715,7 @@ export class SSOAuthEntry extends React.Component {
     }
 }
 
+@replaceableComponent("views.auth.FallbackAuthEntry")
 export class FallbackAuthEntry extends React.Component {
     static propTypes = {
         matrixClient: PropTypes.object.isRequired,

src/components/views/auth/PassphraseField.tsx

@@ -22,6 +22,7 @@ import SdkConfig from "../../../SdkConfig";
 import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
 import {_t, _td} from "../../../languageHandler";
 import Field, {IInputProps} from "../elements/Field";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps extends Omit<IInputProps, "onValidate"> {
     autoFocus?: boolean;
@@ -40,6 +41,7 @@ interface IProps extends Omit<IInputProps, "onValidate"> {
     onValidate(result: IValidationResult);
 }
 
+@replaceableComponent("views.auth.PassphraseField")
 class PassphraseField extends PureComponent<IProps> {
     static defaultProps = {
         label: _td("Password"),

src/components/views/auth/PasswordLogin.tsx

@@ -26,6 +26,7 @@ import withValidation from "../elements/Validation";
 import * as Email from "../../../email";
 import Field from "../elements/Field";
 import CountryDropdown from "./CountryDropdown";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -66,6 +67,7 @@ enum LoginField {
  * A pure UI component which displays a username/password form.
  * The email/username/phone fields are fully-controlled, the password field is not.
  */
+@replaceableComponent("views.auth.PasswordLogin")
 export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     static defaultProps = {
         onUsernameChanged: function() {},

src/components/views/auth/RegistrationForm.tsx

@@ -30,6 +30,7 @@ import PassphraseField from "./PassphraseField";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import Field from '../elements/Field';
 import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 enum RegistrationField {
     Email = "field_email",
@@ -39,7 +40,7 @@ enum RegistrationField {
     PasswordConfirm = "field_password_confirm",
 }
 
-const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
+export const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
 
 interface IProps {
     // Values pre-filled in the input boxes when the component loads
@@ -80,6 +81,7 @@ interface IState {
 /*
  * A pure UI component which displays a registration form.
  */
+@replaceableComponent("views.auth.RegistrationForm")
 export default class RegistrationForm extends React.PureComponent<IProps, IState> {
     static defaultProps = {
         onValidationChange: console.error,

src/components/views/auth/Welcome.js

@@ -24,10 +24,12 @@ import {_td} from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
+@replaceableComponent("views.auth.Welcome")
 export default class Welcome extends React.PureComponent {
     constructor(props) {
         super(props);

src/components/views/avatars/BaseAvatar.tsx

@@ -25,6 +25,8 @@ import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
+import {ResizeMethod} from "../../../Avatar";
+import { _t } from '../../../languageHandler';
 
 interface IProps {
     name: string; // The name (first initial used as default)
@@ -35,7 +37,7 @@ interface IProps {
     width?: number;
     height?: number;
     // XXX: resizeMethod not actually used.
-    resizeMethod?: string;
+    resizeMethod?: ResizeMethod;
     defaultToInitialLetter?: boolean; // true to add default url
     onClick?: React.MouseEventHandler;
     inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
@@ -139,6 +141,7 @@ const BaseAvatar = (props: IProps) => {
         if (onClick) {
             return (
                 <AccessibleButton
+                    aria-label={_t("Avatar")}
                     {...otherProps}
                     element="span"
                     className={classNames("mx_BaseAvatar", className)}

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -30,6 +30,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {_t} from "../../../languageHandler";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     room: Room;
@@ -68,6 +69,7 @@ function tooltipText(variant: Icon) {
     }
 }
 
+@replaceableComponent("views.avatars.DecoratedRoomAvatar")
 export default class DecoratedRoomAvatar extends React.PureComponent<IProps, IState> {
     private _dmUser: User;
     private isUnmounted = false;

src/components/views/avatars/GroupAvatar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +15,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import BaseAvatar from './BaseAvatar';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
+import {ResizeMethod} from "../../../Avatar";
 
 export interface IProps {
         groupId?: string;
@@ -24,10 +26,11 @@ export interface IProps {
         groupAvatarUrl?: string;
         width?: number;
         height?: number;
-        resizeMethod?: string;
+        resizeMethod?: ResizeMethod;
         onClick?: React.MouseEventHandler;
 }
 
+@replaceableComponent("views.avatars.GroupAvatar")
 export default class GroupAvatar extends React.Component<IProps> {
     public static defaultProps = {
         width: 36,
@@ -36,8 +39,8 @@ export default class GroupAvatar extends React.Component<IProps> {
     };
 
     getGroupAvatarUrl() {
-        return MatrixClientPeg.get().mxcUrlToHttp(
-            this.props.groupAvatarUrl,
+        if (!this.props.groupAvatarUrl) return null;
+        return mediaFromMxc(this.props.groupAvatarUrl).getThumbnailOfSourceHttp(
             this.props.width,
             this.props.height,
             this.props.resizeMethod,

src/components/views/avatars/MemberAvatar.tsx

@@ -20,15 +20,17 @@ import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 
 import dis from "../../../dispatcher/dispatcher";
 import {Action} from "../../../dispatcher/actions";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import BaseAvatar from "./BaseAvatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
+import {ResizeMethod} from "../../../Avatar";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;
     fallbackUserId?: string;
     width: number;
     height: number;
-    resizeMethod?: string;
+    resizeMethod?: ResizeMethod;
     // The onClick to give the avatar
     onClick?: React.MouseEventHandler;
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
@@ -42,6 +44,7 @@ interface IState {
     imageUrl?: string;
 }
 
+@replaceableComponent("views.avatars.MemberAvatar")
 export default class MemberAvatar extends React.Component<IProps, IState> {
     public static defaultProps = {
         width: 40,
@@ -61,18 +64,19 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
     }
 
     private static getState(props: IProps): IState {
-        if (props.member && props.member.name) {
+        if (props.member?.name) {
+            let imageUrl = null;
+            if (props.member.getMxcAvatarUrl()) {
+                imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
+                    props.width,
+                    props.height,
+                    props.resizeMethod,
+                );
+            }
             return {
                 name: props.member.name,
                 title: props.title || props.member.userId,
-                imageUrl: props.member.getAvatarUrl(
-                    MatrixClientPeg.get().getHomeserverUrl(),
-                    Math.floor(props.width * window.devicePixelRatio),
-                    Math.floor(props.height * window.devicePixelRatio),
-                    props.resizeMethod,
-                    false,
-                    false,
-                ),
+                imageUrl: imageUrl,
             };
         } else if (props.fallbackUserId) {
             return {

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -23,7 +23,9 @@ import classNames from 'classnames';
 import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
 import {ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.avatars.MemberStatusMessageAvatar")
 export default class MemberStatusMessageAvatar extends React.Component {
     static propTypes = {
         member: PropTypes.object.isRequired,

src/components/views/avatars/RoomAvatar.tsx

@@ -13,9 +13,8 @@ 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 from 'react';
+import React, {ComponentProps} from 'react';
 import Room from 'matrix-js-sdk/src/models/room';
-import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
@@ -23,8 +22,10 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
 import {ResizeMethod} from "../../../Avatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
-interface IProps {
+interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
@@ -42,6 +43,7 @@ interface IState {
     urls: string[];
 }
 
+@replaceableComponent("views.avatars.RoomAvatar")
 export default class RoomAvatar extends React.Component<IProps, IState> {
     public static defaultProps = {
         width: 36,
@@ -88,16 +90,16 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     private static getImageUrls(props: IProps): string[] {
-        return [
-            getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                // Default props don't play nicely with getDerivedStateFromProps
-                //props.oobData !== undefined ? props.oobData.avatarUrl : {},
-                props.oobData.avatarUrl,
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
+        let oobAvatar = null;
+        if (props.oobData.avatarUrl) {
+            oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
+                props.width,
+                props.height,
                 props.resizeMethod,
-            ), // highest priority
+            );
+        }
+        return [
+            oobAvatar, // highest priority
             RoomAvatar.getRoomAvatarUrl(props),
         ].filter(function(url) {
             return (url !== null && url !== "");
@@ -107,12 +109,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(
-            props.room,
-            Math.floor(props.width * window.devicePixelRatio),
-            Math.floor(props.height * window.devicePixelRatio),
-            props.resizeMethod,
-        );
+        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = () => {
@@ -127,7 +124,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             name: this.props.room.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     public render() {

src/components/views/avatars/WidgetAvatar.tsx

@@ -14,21 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ComponentProps, useContext} from 'react';
+import React, {ComponentProps} from 'react';
 import classNames from 'classnames';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {IApp} from "../../../stores/WidgetStore";
 import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp;
 }
 
 const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
-    const cli = useContext(MatrixClientContext);
-
     let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
     // heuristics for some better icons until Widgets support their own icons
     if (app.type.includes("jitsi")) {
@@ -47,7 +44,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             name={app.id}
             className={classNames("mx_WidgetAvatar", className)}
             // MSC2765
-            url={app.avatar_url ? getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop") : undefined}
+            url={app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : undefined}
             urls={iconUrls}
             width={width}
             height={height}

src/components/views/context_menus/CallContextMenu.tsx

@@ -22,11 +22,13 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import CallHandler from '../../../CallHandler';
 import InviteDialog, { KIND_CALL_TRANSFER } from '../dialogs/InviteDialog';
 import Modal from '../../../Modal';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
 }
 
+@replaceableComponent("views.context_menus.CallContextMenu")
 export default class CallContextMenu extends React.Component<IProps> {
     static propTypes = {
         // js-sdk User object. Not required because it might not exist.

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -19,6 +19,7 @@ import { _t } from '../../../languageHandler';
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import Dialpad from '../voip/DialPad';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
@@ -28,6 +29,7 @@ interface IState {
     value: string;
 }
 
+@replaceableComponent("views.context_menus.DialpadContextMenu")
 export default class DialpadContextMenu extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/context_menus/GenericElementContextMenu.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * This component can be used to display generic HTML content in a contextual
@@ -23,6 +24,7 @@ import PropTypes from 'prop-types';
  */
 
 
+@replaceableComponent("views.context_menus.GenericElementContextMenu")
 export default class GenericElementContextMenu extends React.Component {
     static propTypes = {
         element: PropTypes.element.isRequired,

src/components/views/context_menus/GenericTextContextMenu.js

@@ -16,7 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.context_menus.GenericTextContextMenu")
 export default class GenericTextContextMenu extends React.Component {
     static propTypes = {
         message: PropTypes.string.isRequired,

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -20,10 +20,12 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {Group} from 'matrix-js-sdk';
+import {Group} from 'matrix-js-sdk/src/models/group';
 import GroupStore from "../../../stores/GroupStore";
 import {MenuItem} from "../../structures/ContextMenu";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
 export default class GroupInviteTileContextMenu extends React.Component {
     static propTypes = {
         group: PropTypes.instanceOf(Group).isRequired,

src/components/views/context_menus/MessageContextMenu.js

@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016, 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
@@ -32,11 +30,13 @@ import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
 import {MenuItem} from "../../structures/ContextMenu";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-function canCancel(eventStatus) {
+export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
+@replaceableComponent("views.context_menus.MessageContextMenu")
 export default class MessageContextMenu extends React.Component {
     static propTypes = {
         /* the MatrixEvent associated with the context menu */
@@ -50,6 +50,9 @@ export default class MessageContextMenu extends React.Component {
 
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func,
+
+        /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+        onCloseDialog: PropTypes.func,
     };
 
     state = {
@@ -75,8 +78,10 @@ export default class MessageContextMenu extends React.Component {
 
         // We explicitly decline to show the redact option on ACL events as it has a potential
         // to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
+        // Similarly for encryption events, since redacting them "breaks everything"
         const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
-            && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
+            && this.props.mxEvent.getType() !== EventType.RoomServerAcl
+            && this.props.mxEvent.getType() !== EventType.RoomEncryption;
         let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
 
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
@@ -93,21 +98,6 @@ export default class MessageContextMenu extends React.Component {
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     }
 
-    onResendClick = () => {
-        Resend.resend(this.props.mxEvent);
-        this.closeMenu();
-    };
-
-    onResendEditClick = () => {
-        Resend.resend(this.props.mxEvent.replacingEvent());
-        this.closeMenu();
-    };
-
-    onResendRedactionClick = () => {
-        Resend.resend(this.props.mxEvent.localRedactionEvent());
-        this.closeMenu();
-    };
-
     onResendReactionsClick = () => {
         for (const reaction of this._getUnsentReactions()) {
             Resend.resend(reaction);
@@ -124,24 +114,9 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onViewSourceClick = () => {
-        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            roomId: ev.getRoomId(),
-            eventId: ev.getId(),
-            content: ev.event,
-        }, 'mx_Dialog_viewsource');
-        this.closeMenu();
-    };
-
-    onViewClearSourceClick = () => {
-        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
-        const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: ev.getRoomId(),
-            eventId: ev.getId(),
-            // FIXME: _clearEvent is private
-            content: ev._clearEvent,
+            mxEvent: this.props.mxEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };
@@ -154,6 +129,7 @@ export default class MessageContextMenu extends React.Component {
 
                 const cli = MatrixClientPeg.get();
                 try {
+                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                     await cli.redactEvent(
                         this.props.mxEvent.getRoomId(),
                         this.props.mxEvent.getId(),
@@ -179,30 +155,8 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onCancelSendClick = () => {
-        const mxEvent = this.props.mxEvent;
-        const editEvent = mxEvent.replacingEvent();
-        const redactEvent = mxEvent.localRedactionEvent();
-        const pendingReactions = this._getPendingReactions();
-
-        if (editEvent && canCancel(editEvent.status)) {
-            Resend.removeFromQueue(editEvent);
-        }
-        if (redactEvent && canCancel(redactEvent.status)) {
-            Resend.removeFromQueue(redactEvent);
-        }
-        if (pendingReactions.length) {
-            for (const reaction of pendingReactions) {
-                Resend.removeFromQueue(reaction);
-            }
-        }
-        if (canCancel(mxEvent.status)) {
-            Resend.removeFromQueue(this.props.mxEvent);
-        }
-        this.closeMenu();
-    };
-
     onForwardClick = () => {
+        if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
             action: 'forward_event',
             event: this.props.mxEvent,
@@ -293,23 +247,11 @@ export default class MessageContextMenu extends React.Component {
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
-        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
-        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
         const unsentReactionsCount = this._getUnsentReactions().length;
-        const pendingReactionsCount = this._getPendingReactions().length;
-        const allowCancel = canCancel(mxEvent.status) ||
-            canCancel(editStatus) ||
-            canCancel(redactStatus) ||
-            pendingReactionsCount !== 0;
-        let resendButton;
-        let resendEditButton;
         let resendReactionsButton;
-        let resendRedactionButton;
         let redactButton;
-        let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewClearSourceButton;
         let unhidePreviewButton;
         let externalURLButton;
         let quoteButton;
@@ -318,22 +260,6 @@ export default class MessageContextMenu extends React.Component {
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
-            if (eventStatus === EventStatus.NOT_SENT) {
-                resendButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
-                        { _t('Resend') }
-                    </MenuItem>
-                );
-            }
-
-            if (editStatus === EventStatus.NOT_SENT) {
-                resendEditButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
-                        { _t('Resend edit') }
-                    </MenuItem>
-                );
-            }
-
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
                     <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
@@ -343,14 +269,6 @@ export default class MessageContextMenu extends React.Component {
             }
         }
 
-        if (redactStatus === EventStatus.NOT_SENT) {
-            resendRedactionButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
-                    { _t('Resend removal') }
-                </MenuItem>
-            );
-        }
-
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
@@ -359,14 +277,6 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        if (allowCancel) {
-            cancelButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
-                    { _t('Cancel Sending') }
-                </MenuItem>
-            );
-        }
-
         if (isContentActionable(mxEvent)) {
             forwardButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
@@ -389,14 +299,6 @@ export default class MessageContextMenu extends React.Component {
             </MenuItem>
         );
 
-        if (mxEvent.getType() !== mxEvent.getWireType()) {
-            viewClearSourceButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
-                    { _t('View Decrypted Source') }
-                </MenuItem>
-            );
-        }
-
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
@@ -450,7 +352,7 @@ export default class MessageContextMenu extends React.Component {
                 >
                     { _t('Source URL') }
                 </MenuItem>
-          );
+            );
         }
 
         if (this.props.collapseReplyThread) {
@@ -472,16 +374,11 @@ export default class MessageContextMenu extends React.Component {
 
         return (
             <div className="mx_MessageContextMenu">
-                { resendButton }
-                { resendEditButton }
                 { resendReactionsButton }
-                { resendRedactionButton }
                 { redactButton }
-                { cancelButton }
                 { forwardButton }
                 { pinButton }
                 { viewSourceButton }
-                { viewClearSourceButton }
                 { unhidePreviewButton }
                 { permalinkButton }
                 { quoteButton }

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -20,7 +20,9 @@ import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.context_menus.StatusMessageContextMenu")
 export default class StatusMessageContextMenu extends React.Component {
     static propTypes = {
         // js-sdk User object. Not required because it might not exist.

src/components/views/context_menus/TagTileContextMenu.js

@@ -22,7 +22,9 @@ import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.context_menus.TagTileContextMenu")
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
         tag: PropTypes.string.isRequired,

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -28,9 +28,11 @@ import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import QuestionDialog from "../dialogs/QuestionDialog";
+import ErrorDialog from "../dialogs/ErrorDialog";
 import {WidgetType} from "../../../widgets/WidgetType";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
 
 interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
     app: IApp;
@@ -54,6 +56,27 @@ const WidgetContextMenu: React.FC<IProps> = ({
     const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
     const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
 
+    let streamAudioStreamButton;
+    if (getConfigLivestreamUrl() && WidgetType.JITSI.matches(app.type)) {
+        const onStreamAudioClick = async () => {
+            try {
+                await startJitsiAudioLivestream(widgetMessaging, roomId);
+            } catch (err) {
+                console.error("Failed to start livestream", err);
+                // XXX: won't i18n well, but looks like widget api only support 'message'?
+                const message = err.message || _t("Unable to start audio streaming.");
+                Modal.createTrackedDialog('WidgetContext Menu', 'Livestream failed', ErrorDialog, {
+                    title: _t('Failed to start livestream'),
+                    description: message,
+                });
+            }
+            onFinished();
+        };
+        streamAudioStreamButton = <IconizedContextMenuOption
+            onClick={onStreamAudioClick} label={_t("Start audio stream")}
+        />;
+    }
+
     let unpinButton;
     if (showUnpin) {
         const onUnpinClick = () => {
@@ -163,6 +186,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     return <IconizedContextMenu {...props} chevronFace={ChevronFace.None} onFinished={onFinished}>
         <IconizedContextMenuOptionList>
+            { streamAudioStreamButton }
             { editButton }
             { revokeButton }
             { deleteButton }
@@ -175,4 +199,3 @@ const WidgetContextMenu: React.FC<IProps> = ({
 };
 
 export default WidgetContextMenu;
-

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -0,0 +1,310 @@
+/*
+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, {useContext, useMemo, useState} from "react";
+import classNames from "classnames";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+
+import {_t} from '../../../languageHandler';
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import Dropdown from "../elements/Dropdown";
+import SearchBox from "../../structures/SearchBox";
+import SpaceStore from "../../../stores/SpaceStore";
+import RoomAvatar from "../avatars/RoomAvatar";
+import {getDisplayAliasForRoom} from "../../../Rooms";
+import AccessibleButton from "../elements/AccessibleButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {sleep} from "../../../utils/promise";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import ProgressBar from "../elements/ProgressBar";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    space: Room;
+    onCreateRoomClick(cli: MatrixClient, space: Room): void;
+}
+
+const Entry = ({ room, checked, onChange }) => {
+    return <label className="mx_AddExistingToSpace_entry">
+        <RoomAvatar room={room} height={32} width={32} />
+        <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
+        <StyledCheckbox
+            onChange={onChange ? (e) => onChange(e.target.checked) : null}
+            checked={checked}
+            disabled={!onChange}
+        />
+    </label>;
+};
+
+interface IAddExistingToSpaceProps {
+    space: Room;
+    selected: Set<Room>;
+    onChange(checked: boolean, room: Room): void;
+}
+
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
+    const cli = useContext(MatrixClientContext);
+    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);
+
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+    const existingSubspacesSet = new Set(existingSubspaces);
+    const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
+
+    const joinRule = space.getJoinRule();
+    const [spaces, rooms, dms] = visibleRooms.reduce((arr, room) => {
+        if (room.getMyMembership() !== "join") return arr;
+        if (!room.name.toLowerCase().includes(lcQuery)) return arr;
+
+        if (room.isSpaceRoom()) {
+            if (room !== space && !existingSubspacesSet.has(room)) {
+                arr[0].push(room);
+            }
+        } else if (!existingRoomsSet.has(room)) {
+            if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                arr[1].push(room);
+            } else if (joinRule !== "public") {
+                // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+                arr[2].push(room);
+            }
+        }
+        return arr;
+    }, [[], [], []]);
+
+    return <div className="mx_AddExistingToSpace">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    { rooms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selected.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selected.has(space)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selected.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
+
+    const [progress, setProgress] = useState<number>(null);
+    const [error, setError] = useState<Error>(null);
+
+    let spaceOptionSection;
+    if (existingSubspaces.length > 0) {
+        const options = [space, ...existingSubspaces].map((space) => {
+            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
+                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+            });
+            return <div key={space.roomId} className={classes}>
+                <RoomAvatar room={space} width={24} height={24} />
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>;
+        });
+
+        spaceOptionSection = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                }}
+                value={selectedSpace.roomId}
+                label={_t("Space selection")}
+            >
+                { options }
+            </Dropdown>
+        );
+    } else {
+        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
+            { space.name || getDisplayAliasForRoom(space) || space.roomId }
+        </div>;
+    }
+
+    const title = <React.Fragment>
+        <RoomAvatar room={selectedSpace} height={40} width={40} />
+        <div>
+            <h1>{ _t("Add existing rooms") }</h1>
+            { spaceOptionSection }
+        </div>
+    </React.Fragment>;
+
+    const addRooms = async () => {
+        setError(null);
+        setProgress(0);
+
+        let error;
+
+        for (const room of selectedToAdd) {
+            const via = calculateRoomVia(room);
+            try {
+                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                    if (e.errcode === "M_LIMIT_EXCEEDED") {
+                        await sleep(e.data.retry_after_ms);
+                        return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                    }
+
+                    throw e;
+                });
+                setProgress(i => i + 1);
+            } catch (e) {
+                console.error("Failed to add rooms to space", e);
+                setError(error = e);
+                break;
+            }
+        }
+
+        if (!error) {
+            onFinished(true);
+        }
+    };
+
+    const busy = progress !== null;
+
+    let footer;
+    if (error) {
+        footer = <>
+            <img
+                src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                height="24"
+                width="24"
+                alt=""
+            />
+
+            <span className="mx_AddExistingToSpaceDialog_error">
+                <div className="mx_AddExistingToSpaceDialog_errorHeading">{ _t("Not all selected were added") }</div>
+                <div className="mx_AddExistingToSpaceDialog_errorCaption">{ _t("Try again") }</div>
+            </span>
+
+            <AccessibleButton className="mx_AddExistingToSpaceDialog_retryButton" onClick={addRooms}>
+                { _t("Retry") }
+            </AccessibleButton>
+        </>;
+    } else if (busy) {
+        footer = <span>
+            <ProgressBar value={progress} max={selectedToAdd.size} />
+            <div className="mx_AddExistingToSpaceDialog_progressText">
+                { _t("Adding rooms... (%(progress)s out of %(count)s)", {
+                    count: selectedToAdd.size,
+                    progress,
+                }) }
+            </div>
+        </span>;
+    } else {
+        footer = <>
+            <span>
+                <div>{ _t("Want to add a new room instead?") }</div>
+                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                    { _t("Create a new room") }
+                </AccessibleButton>
+            </span>
+
+            <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
+            </AccessibleButton>
+        </>;
+    }
+
+    return <BaseDialog
+        title={title}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpace"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={cli}>
+            <AddExistingToSpace
+                space={space}
+                selected={selectedToAdd}
+                onChange={!busy && !error ? (checked, room) => {
+                    if (checked) {
+                        selectedToAdd.add(room);
+                    } else {
+                        selectedToAdd.delete(room);
+                    }
+                    setSelectedToAdd(new Set(selectedToAdd));
+                } : null}
+            />
+        </MatrixClientContext.Provider>
+
+        <div className="mx_AddExistingToSpaceDialog_footer">
+            { footer }
+        </div>
+    </BaseDialog>;
+};
+
+export default AddExistingToSpaceDialog;
+

src/components/views/dialogs/AddressPickerDialog.js

@@ -33,6 +33,7 @@ import { abbreviateUrl } from '../../../utils/UrlUtils';
 import {sleep} from "../../../utils/promise";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -43,7 +44,7 @@ const addressTypeName = {
     'email': _td("email address"),
 };
 
-
+@replaceableComponent("views.dialogs.AddressPickerDialog")
 export default class AddressPickerDialog extends React.Component {
     static propTypes = {
         title: PropTypes.string.isRequired,

src/components/views/dialogs/AskInviteAnywayDialog.js

@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import {SettingLevel} from "../../../settings/SettingLevel";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.AskInviteAnywayDialog")
 export default class AskInviteAnywayDialog extends React.Component {
     static propTypes = {
         unknownProfileUsers: PropTypes.array.isRequired, // [ {userId, errorText}... ]

src/components/views/dialogs/BaseDialog.js

@@ -26,6 +26,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * Basic container for modal dialogs.
@@ -33,6 +34,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
  * Includes a div for the title, and a keypress handler which cancels the
  * dialog on escape.
  */
+@replaceableComponent("views.dialogs.BaseDialog")
 export default class BaseDialog extends React.Component {
     static propTypes = {
         // onFinished callback to call when Escape is pressed

src/components/views/dialogs/BugReportDialog.js

@@ -25,7 +25,9 @@ import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import sendBugReport, {downloadBugReport} from '../../../rageshake/submit-rageshake';
 import AccessibleButton from "../elements/AccessibleButton";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.BugReportDialog")
 export default class BugReportDialog extends React.Component {
     constructor(props) {
         super(props);
@@ -182,7 +184,7 @@ export default class BugReportDialog extends React.Component {
 
         return (
             <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
-                    title={_t('Submit debug logs')}
+                title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>

src/components/views/dialogs/ChangelogDialog.js

@@ -95,7 +95,7 @@ export default class ChangelogDialog extends React.Component {
                 description={content}
                 button={_t("Update")}
                 onFinished={this.props.onFinished}
-                />
+            />
         );
     }
 }

src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx

@@ -26,11 +26,12 @@ import SdkConfig from "../../../SdkConfig";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import InviteDialog from "./InviteDialog";
 import BaseAvatar from "../avatars/BaseAvatar";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     roomId: string;
@@ -52,6 +53,7 @@ interface IState {
     busy: boolean;
 }
 
+@replaceableComponent("views.dialogs.CommunityPrototypeInviteDialog")
 export default class CommunityPrototypeInviteDialog extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -140,12 +142,14 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
 
     private renderPerson(person: IPerson, key: any) {
         const avatarSize = 36;
+        let avatarUrl = null;
+        if (person.user.getMxcAvatarUrl()) {
+            avatarUrl = mediaFromMxc(person.user.getMxcAvatarUrl()).getSquareThumbnailHttp(avatarSize);
+        }
         return (
             <div className="mx_CommunityPrototypeInviteDialog_person" key={key}>
                 <BaseAvatar
-                    url={getHttpUriForMxc(
-                        MatrixClientPeg.get().getHomeserverUrl(), person.user.getMxcAvatarUrl(),
-                        avatarSize, avatarSize, "crop")}
+                    url={avatarUrl}
                     name={person.user.name}
                     idName={person.user.userId}
                     width={avatarSize}

src/components/views/dialogs/ConfirmAndWaitRedactDialog.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * A dialog for confirming a redaction.
@@ -30,6 +31,7 @@ import { _t } from '../../../languageHandler';
  *
  * To avoid this, we keep the dialog open as long as /redact is in progress.
  */
+@replaceableComponent("views.dialogs.ConfirmAndWaitRedactDialog")
 export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
     constructor(props) {
         super(props);

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -17,10 +17,12 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * A dialog for confirming a redaction.
  */
+@replaceableComponent("views.dialogs.ConfirmRedactDialog")
 export default class ConfirmRedactDialog extends React.Component {
     render() {
         const TextInputDialog = sdk.getComponent('views.dialogs.TextInputDialog');

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -16,10 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 /*
  * A dialog for confirming an operation on another user.
@@ -29,6 +31,7 @@ import { GroupMemberType } from '../../../groups';
  * to make it obvious what is going to happen.
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
+@replaceableComponent("views.dialogs.ConfirmUserActionDialog")
 export default class ConfirmUserActionDialog extends React.Component {
     static propTypes = {
         // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
@@ -106,8 +109,9 @@ export default class ConfirmUserActionDialog extends React.Component {
             name = this.props.member.name;
             userId = this.props.member.userId;
         } else {
-            const httpAvatarUrl = this.props.groupMember.avatarUrl ?
-                this.props.matrixClient.mxcUrlToHttp(this.props.groupMember.avatarUrl, 48, 48) : null;
+            const httpAvatarUrl = this.props.groupMember.avatarUrl
+                ? mediaFromMxc(this.props.groupMember.avatarUrl).getSquareThumbnailHttp(48)
+                : null;
             name = this.props.groupMember.displayname || this.props.groupMember.userId;
             userId = this.props.groupMember.userId;
             avatar = <BaseAvatar name={name} url={httpAvatarUrl} width={48} height={48} />;

src/components/views/dialogs/ConfirmWipeDeviceDialog.js

@@ -18,7 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.ConfirmWipeDeviceDialog")
 export default class ConfirmWipeDeviceDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -37,9 +39,12 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_ConfirmWipeDeviceDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Clear all data in this session?")}>
+            <BaseDialog
+                className='mx_ConfirmWipeDeviceDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Clear all data in this session?")}
+            >
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
                         {_t(

src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx

@@ -25,6 +25,7 @@ import InfoTooltip from "../elements/InfoTooltip";
 import dis from "../../../dispatcher/dispatcher";
 import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
 import GroupStore from "../../../stores/GroupStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
@@ -38,6 +39,7 @@ interface IState {
     avatarPreview: string;
 }
 
+@replaceableComponent("views.dialogs.CreateCommunityPrototypeDialog")
 export default class CreateCommunityPrototypeDialog extends React.PureComponent<IProps, IState> {
     private avatarUploadRef: React.RefObject<HTMLInputElement> = React.createRef();
 

src/components/views/dialogs/CreateGroupDialog.js

@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.CreateGroupDialog")
 export default class CreateGroupDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,

src/components/views/dialogs/CreateRoomDialog.js

@@ -17,6 +17,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import withValidation from '../elements/Validation';
@@ -25,11 +27,14 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
 import {privateShouldBeEncrypted} from "../../../createRoom";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.CreateRoomDialog")
 export default class CreateRoomDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         defaultPublic: PropTypes.bool,
+        parentSpace: PropTypes.instanceOf(Room),
     };
 
     constructor(props) {
@@ -85,6 +90,10 @@ export default class CreateRoomDialog extends React.Component {
             opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
         }
 
+        if (this.props.parentSpace) {
+            opts.parentSpace = this.props.parentSpace;
+        }
+
         return opts;
     }
 

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -26,7 +26,9 @@ import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.DeactivateAccountDialog")
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
         super(props);

src/components/views/dialogs/DevtoolsDialog.js

@@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import { Room, MatrixEvent } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -34,6 +33,13 @@ import {
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import WidgetStore from "../../../stores/WidgetStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import {SETTINGS} from "../../../settings/Settings";
+import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
+import Modal from "../../../Modal";
+import ErrorDialog from "./ErrorDialog";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 
 class GenericEditor extends React.PureComponent {
     // static propTypes = {onBack: PropTypes.func.isRequired};
@@ -64,18 +70,27 @@ class GenericEditor extends React.PureComponent {
     }
 
     textInput(id, label) {
-        return <Field id={id} label={label} size="42" autoFocus={true} type="text" autoComplete="on"
-                      value={this.state[id]} onChange={this._onChange} />;
+        return <Field
+            id={id}
+            label={label}
+            size="42"
+            autoFocus={true}
+            type="text"
+            autoComplete="on"
+            value={this.state[id]}
+            onChange={this._onChange}
+        />;
     }
 }
 
-class SendCustomEvent extends GenericEditor {
+export class SendCustomEvent extends GenericEditor {
     static getLabel() { return _t('Send Custom Event'); }
 
     static propTypes = {
         onBack: PropTypes.func.isRequired,
         room: PropTypes.instanceOf(Room).isRequired,
         forceStateEvent: PropTypes.bool,
+        forceGeneralEvent: PropTypes.bool,
         inputs: PropTypes.object,
     };
 
@@ -136,6 +151,8 @@ class SendCustomEvent extends GenericEditor {
             </div>;
         }
 
+        const showTglFlip = !this.state.message && !this.props.forceStateEvent && !this.props.forceGeneralEvent;
+
         return <div>
             <div className="mx_DevTools_content">
                 <div className="mx_DevTools_eventTypeStateKeyGroup">
@@ -146,12 +163,12 @@ class SendCustomEvent extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
-                { !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}>
+                { showTglFlip && <div style={{float: "right"}}>
                     <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
                     <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
                 </div> }
@@ -230,7 +247,7 @@ class SendAccountData extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -306,15 +323,15 @@ class FilteredList extends React.PureComponent {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
             <Field label={_t('Filter results')} autoFocus={true} size={64}
-                   type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
-                   className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
-                   // force re-render so that autoFocus is applied when this component is re-used
-                   key={this.props.children[0] ? this.props.children[0].key : ''} />
+                type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
+                className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                // force re-render so that autoFocus is applied when this component is re-used
+                key={this.props.children[0] ? this.props.children[0].key : ''} />
 
             <TruncatedList getChildren={this.getChildren}
-                           getChildCount={this.getChildCount}
-                           truncateAt={this.state.truncateAt}
-                           createOverflowElement={this.createOverflowElement} />
+                getChildCount={this.getChildCount}
+                truncateAt={this.state.truncateAt}
+                createOverflowElement={this.createOverflowElement} />
         </div>;
     }
 }
@@ -638,7 +655,7 @@ function VerificationRequest({txnId, request}) {
 
         /* Note that request.timeout is a getter, so its value changes */
         const id = setInterval(() => {
-           setRequestTimeout(request.timeout);
+            setRequestTimeout(request.timeout);
         }, 500);
 
         return () => { clearInterval(id); };
@@ -794,6 +811,286 @@ class WidgetExplorer extends React.Component {
     }
 }
 
+class SettingsExplorer extends React.Component {
+    static getLabel() {
+        return _t("Settings Explorer");
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            query: '',
+            editSetting: null, // set to a setting ID when editing
+            viewSetting: null, // set to a setting ID when exploring in detail
+
+            explicitValues: null, // stringified JSON for edit view
+            explicitRoomValues: null, // stringified JSON for edit view
+        };
+    }
+
+    onQueryChange = (ev) => {
+        this.setState({query: ev.target.value});
+    };
+
+    onExplValuesEdit = (ev) => {
+        this.setState({explicitValues: ev.target.value});
+    };
+
+    onExplRoomValuesEdit = (ev) => {
+        this.setState({explicitRoomValues: ev.target.value});
+    };
+
+    onBack = () => {
+        if (this.state.editSetting) {
+            this.setState({editSetting: null});
+        } else if (this.state.viewSetting) {
+            this.setState({viewSetting: null});
+        } else {
+            this.props.onBack();
+        }
+    };
+
+    onViewClick = (ev, settingId) => {
+        ev.preventDefault();
+        this.setState({viewSetting: settingId});
+    };
+
+    onEditClick = (ev, settingId) => {
+        ev.preventDefault();
+        this.setState({
+            editSetting: settingId,
+            explicitValues: this.renderExplicitSettingValues(settingId, null),
+            explicitRoomValues: this.renderExplicitSettingValues(settingId, this.props.room.roomId),
+        });
+    };
+
+    onSaveClick = async () => {
+        try {
+            const settingId = this.state.editSetting;
+            const parsedExplicit = JSON.parse(this.state.explicitValues);
+            const parsedExplicitRoom = JSON.parse(this.state.explicitRoomValues);
+            for (const level of Object.keys(parsedExplicit)) {
+                console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
+                try {
+                    const val = parsedExplicit[level];
+                    await SettingsStore.setValue(settingId, null, level, val);
+                } catch (e) {
+                    console.warn(e);
+                }
+            }
+            const roomId = this.props.room.roomId;
+            for (const level of Object.keys(parsedExplicit)) {
+                console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
+                try {
+                    const val = parsedExplicitRoom[level];
+                    await SettingsStore.setValue(settingId, roomId, level, val);
+                } catch (e) {
+                    console.warn(e);
+                }
+            }
+            this.setState({
+                viewSetting: settingId,
+                editSetting: null,
+            });
+        } catch (e) {
+            Modal.createTrackedDialog('Devtools - Failed to save settings', '', ErrorDialog, {
+                title: _t("Failed to save settings"),
+                description: e.message,
+            });
+        }
+    };
+
+    renderSettingValue(val) {
+        // Note: we don't .toString() a string because we want JSON.stringify to inject quotes for us
+        const toStringTypes = ['boolean', 'number'];
+        if (toStringTypes.includes(typeof(val))) {
+            return val.toString();
+        } else {
+            return JSON.stringify(val);
+        }
+    }
+
+    renderExplicitSettingValues(setting, roomId) {
+        const vals = {};
+        for (const level of LEVEL_ORDER) {
+            try {
+                vals[level] = SettingsStore.getValueAt(level, setting, roomId, true, true);
+                if (vals[level] === undefined) {
+                    vals[level] = null;
+                }
+            } catch (e) {
+                console.warn(e);
+            }
+        }
+        return JSON.stringify(vals, null, 4);
+    }
+
+    renderCanEditLevel(roomId, level) {
+        const canEdit = SettingsStore.canSetValue(this.state.editSetting, roomId, level);
+        const className = canEdit ? 'mx_DevTools_SettingsExplorer_mutable' : 'mx_DevTools_SettingsExplorer_immutable';
+        return <td className={className}><code>{canEdit.toString()}</code></td>;
+    }
+
+    render() {
+        const room = this.props.room;
+
+        if (!this.state.viewSetting && !this.state.editSetting) {
+            // view all settings
+            const allSettings = Object.keys(SETTINGS)
+                .filter(n => this.state.query ? n.toLowerCase().includes(this.state.query.toLowerCase()) : true);
+            return (
+                <div>
+                    <div className="mx_Dialog_content mx_DevTools_SettingsExplorer">
+                        <Field
+                            label={_t('Filter results')} autoFocus={true} size={64}
+                            type="text" autoComplete="off" value={this.state.query} onChange={this.onQueryChange}
+                            className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                        />
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>{_t("Setting ID")}</th>
+                                    <th>{_t("Value")}</th>
+                                    <th>{_t("Value in this room")}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {allSettings.map(i => (
+                                    <tr key={i}>
+                                        <td>
+                                            <a href="" onClick={(e) => this.onViewClick(e, i)}>
+                                                <code>{i}</code>
+                                            </a>
+                                            <a href="" onClick={(e) => this.onEditClick(e, i)}
+                                                className='mx_DevTools_SettingsExplorer_edit'
+                                            >
+                                            ✏
+                                            </a>
+                                        </td>
+                                        <td>
+                                            <code>{this.renderSettingValue(SettingsStore.getValue(i))}</code>
+                                        </td>
+                                        <td>
+                                            <code>
+                                                {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
+                                            </code>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={this.onBack}>{_t("Back")}</button>
+                    </div>
+                </div>
+            );
+        } else if (this.state.editSetting) {
+            return (
+                <div>
+                    <div className="mx_Dialog_content mx_DevTools_SettingsExplorer">
+                        <h3>{_t("Setting:")} <code>{this.state.editSetting}</code></h3>
+
+                        <div className='mx_DevTools_SettingsExplorer_warning'>
+                            <b>{_t("Caution:")}</b> {_t(
+                                "This UI does NOT check the types of the values. Use at your own risk.",
+                            )}
+                        </div>
+
+                        <div>
+                            {_t("Setting definition:")}
+                            <pre><code>{JSON.stringify(SETTINGS[this.state.editSetting], null, 4)}</code></pre>
+                        </div>
+
+                        <div>
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th>{_t("Level")}</th>
+                                        <th>{_t("Settable at global")}</th>
+                                        <th>{_t("Settable at room")}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {LEVEL_ORDER.map(lvl => (
+                                        <tr key={lvl}>
+                                            <td><code>{lvl}</code></td>
+                                            {this.renderCanEditLevel(null, lvl)}
+                                            {this.renderCanEditLevel(room.roomId, lvl)}
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div>
+                            <Field
+                                id="valExpl" label={_t("Values at explicit levels")} type="text"
+                                className="mx_DevTools_textarea" element="textarea"
+                                autoComplete="off" value={this.state.explicitValues}
+                                onChange={this.onExplValuesEdit}
+                            />
+                        </div>
+
+                        <div>
+                            <Field
+                                id="valExpl" label={_t("Values at explicit levels in this room")} type="text"
+                                className="mx_DevTools_textarea" element="textarea"
+                                autoComplete="off" value={this.state.explicitRoomValues}
+                                onChange={this.onExplRoomValuesEdit}
+                            />
+                        </div>
+
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={this.onSaveClick}>{_t("Save setting values")}</button>
+                        <button onClick={this.onBack}>{_t("Back")}</button>
+                    </div>
+                </div>
+            );
+        } else if (this.state.viewSetting) {
+            return (
+                <div>
+                    <div className="mx_Dialog_content mx_DevTools_SettingsExplorer">
+                        <h3>{_t("Setting:")} <code>{this.state.viewSetting}</code></h3>
+
+                        <div>
+                            {_t("Setting definition:")}
+                            <pre><code>{JSON.stringify(SETTINGS[this.state.viewSetting], null, 4)}</code></pre>
+                        </div>
+
+                        <div>
+                            {_t("Value:")}&nbsp;
+                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting))}</code>
+                        </div>
+
+                        <div>
+                            {_t("Value in this room:")}&nbsp;
+                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting, room.roomId))}</code>
+                        </div>
+
+                        <div>
+                            {_t("Values at explicit levels:")}
+                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, null)}</code></pre>
+                        </div>
+
+                        <div>
+                            {_t("Values at explicit levels in this room:")}
+                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, room.roomId)}</code></pre>
+                        </div>
+
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{_t("Edit Values")}</button>
+                        <button onClick={this.onBack}>{_t("Back")}</button>
+                    </div>
+                </div>
+            );
+        }
+    }
+}
+
 const Entries = [
     SendCustomEvent,
     RoomStateExplorer,
@@ -802,8 +1099,10 @@ const Entries = [
     ServersInRoomList,
     VerificationExplorer,
     WidgetExplorer,
+    SettingsExplorer,
 ];
 
+@replaceableComponent("views.dialogs.DevtoolsDialog")
 export default class DevtoolsDialog extends React.PureComponent {
     static propTypes = {
         roomId: PropTypes.string.isRequired,

src/components/views/dialogs/EditCommunityPrototypeDialog.tsx

@@ -23,6 +23,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import FlairStore from "../../../stores/FlairStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     communityId: string;
@@ -38,6 +40,7 @@ interface IState {
 }
 
 // XXX: This is a lot of duplication from the create dialog, just in a different shape
+@replaceableComponent("views.dialogs.EditCommunityPrototypeDialog")
 export default class EditCommunityPrototypeDialog extends React.PureComponent<IProps, IState> {
     private avatarUploadRef: React.RefObject<HTMLInputElement> = React.createRef();
 
@@ -116,7 +119,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
         let preview = <img src={this.state.avatarPreview} className="mx_EditCommunityPrototypeDialog_avatar" />;
         if (!this.state.avatarPreview) {
             if (this.state.currentAvatarUrl) {
-                const url = MatrixClientPeg.get().mxcUrlToHttp(this.state.currentAvatarUrl);
+                const url = mediaFromMxc(this.state.currentAvatarUrl).srcHttp;
                 preview = <img src={url} className="mx_EditCommunityPrototypeDialog_avatar" />;
             } else {
                 preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />

src/components/views/dialogs/ErrorDialog.js

@@ -29,7 +29,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.ErrorDialog")
 export default class ErrorDialog extends React.Component {
     static propTypes = {
         title: PropTypes.string,

src/components/views/dialogs/FeedbackDialog.js

@@ -100,6 +100,20 @@ export default (props) => {
         );
     }
 
+    let bugReports = null;
+    if (SdkConfig.get().bug_report_endpoint_url) {
+        bugReports = (
+            <p>{
+                _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
+                    "to help us track down the problem.", {}, {
+                    debugLogsLink: sub => (
+                        <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
+                    ),
+                })
+            }</p>
+        );
+    }
+
     return (<QuestionDialog
         className="mx_FeedbackDialog"
         hasCancelButton={!!hasFeedback}
@@ -120,14 +134,7 @@ export default (props) => {
                         },
                     })
                 }</p>
-                <p>{
-                    _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
-                        "to help us track down the problem.", {}, {
-                        debugLogsLink: sub => (
-                            <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
-                        ),
-                    })
-                }</p>
+                {bugReports}
             </div>
             { countlyFeedbackSection }
         </React.Fragment>}

src/components/views/dialogs/HostSignupDialog.tsx

@@ -31,6 +31,7 @@ import {
     IPostmessageResponseData,
     PostmessageAction,
 } from "./HostSignupDialogTypes";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const HOST_SIGNUP_KEY = "host_signup";
 
@@ -42,6 +43,7 @@ interface IState {
     minimized: boolean;
 }
 
+@replaceableComponent("views.dialogs.HostSignupDialog")
 export default class HostSignupDialog extends React.PureComponent<IProps, IState> {
     private iframeRef: React.RefObject<HTMLIFrameElement> = React.createRef();
     private readonly config: IHostSignupConfig;

src/components/views/dialogs/IncomingSasDialog.js

@@ -19,6 +19,8 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -26,6 +28,7 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
 const PHASE_VERIFIED = 3;
 const PHASE_CANCELLED = 4;
 
+@replaceableComponent("views.dialogs.IncomingSasDialog")
 export default class IncomingSasDialog extends React.Component {
     static propTypes = {
         verifier: PropTypes.object.isRequired,
@@ -121,22 +124,21 @@ export default class IncomingSasDialog extends React.Component {
         const Spinner = sdk.getComponent("views.elements.Spinner");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        const isSelf = this.props.verifier.userId == MatrixClientPeg.get().getUserId();
+        const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId();
 
         let profile;
-        if (this.state.opponentProfile) {
+        const oppProfile = this.state.opponentProfile;
+        if (oppProfile) {
+            const url = oppProfile.avatar_url
+                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48)
+                : null;
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
-                <BaseAvatar name={this.state.opponentProfile.displayname}
+                <BaseAvatar name={oppProfile.displayname}
                     idName={this.props.verifier.userId}
-                    url={MatrixClientPeg.get().mxcUrlToHttp(
-                        this.state.opponentProfile.avatar_url,
-                        Math.floor(48 * window.devicePixelRatio),
-                        Math.floor(48 * window.devicePixelRatio),
-                        'crop',
-                    )}
+                    url={url}
                     width={48} height={48} resizeMethod='crop'
                 />
-                <h2>{this.state.opponentProfile.displayname}</h2>
+                <h2>{oppProfile.displayname}</h2>
             </div>;
         } else if (this.state.opponentProfileError) {
             profile = <div>

src/components/views/dialogs/InfoDialog.js

@@ -27,7 +27,7 @@ export default class InfoDialog extends React.Component {
         className: PropTypes.string,
         title: PropTypes.string,
         description: PropTypes.node,
-        button: PropTypes.string,
+        button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
         onKeyDown: PropTypes.func,
@@ -60,11 +60,11 @@ export default class InfoDialog extends React.Component {
                 <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }
                 </div>
-                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                { this.props.button !== false && <DialogButtons primaryButton={this.props.button || _t('OK')}
                     onPrimaryButtonClick={this.onFinished}
                     hasCancel={false}
                 >
-                </DialogButtons>
+                </DialogButtons> }
             </BaseDialog>
         );
     }

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -20,7 +20,9 @@ import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import {Action} from "../../../dispatcher/actions";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.IntegrationsDisabledDialog")
 export default class IntegrationsDisabledDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -40,9 +42,12 @@ export default class IntegrationsDisabledDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsDisabledDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations are disabled")}>
+            <BaseDialog
+                className='mx_IntegrationsDisabledDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations are disabled")}
+            >
                 <div className='mx_IntegrationsDisabledDialog_content'>
                     <p>{_t("Enable 'Manage Integrations' in Settings to do this.")}</p>
                 </div>

src/components/views/dialogs/IntegrationsImpossibleDialog.js

@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.IntegrationsImpossibleDialog")
 export default class IntegrationsImpossibleDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -35,9 +37,12 @@ export default class IntegrationsImpossibleDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsImpossibleDialog' hasCancel={false}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations not allowed")}>
+            <BaseDialog
+                className='mx_IntegrationsImpossibleDialog'
+                hasCancel={false}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations not allowed")}
+            >
                 <div className='mx_IntegrationsImpossibleDialog_content'>
                     <p>
                         {_t(

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -25,7 +25,9 @@ import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.InteractiveAuthDialog")
 export default class InteractiveAuthDialog extends React.Component {
     static propTypes = {
         // matrix client to use for UI auth requests

src/components/views/dialogs/InviteDialog.tsx

@@ -15,14 +15,13 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import {_t} from "../../../languageHandler";
+import {_t, _td} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 import SdkConfig from "../../../SdkConfig";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import * as Email from "../../../email";
 import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
 import {abbreviateUrl} from "../../../utils/UrlUtils";
@@ -30,7 +29,10 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {
+    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+    IInvite3PID,
+} from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
@@ -42,6 +44,9 @@ import {UIFeature} from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
+import {getAddressType} from "../../../UserAddress";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -159,9 +164,9 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
                 width={avatarSize} height={avatarSize} />
             : <BaseAvatar
                 className='mx_InviteDialog_userTile_avatar'
-                url={getHttpUriForMxc(
-                    MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(),
-                    avatarSize, avatarSize, "crop")}
+                url={this.props.member.getMxcAvatarUrl()
+                    ? mediaFromMxc(this.props.member.getMxcAvatarUrl()).getSquareThumbnailHttp(avatarSize)
+                    : null}
                 name={this.props.member.name}
                 idName={this.props.member.userId}
                 width={avatarSize}
@@ -261,9 +266,9 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
                 src={require("../../../../res/img/icon-email-pill-avatar.svg")}
                 width={avatarSize} height={avatarSize} />
             : <BaseAvatar
-                url={getHttpUriForMxc(
-                    MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(),
-                    avatarSize, avatarSize, "crop")}
+                url={this.props.member.getMxcAvatarUrl()
+                    ? mediaFromMxc(this.props.member.getMxcAvatarUrl()).getSquareThumbnailHttp(avatarSize)
+                    : null}
                 name={this.props.member.name}
                 idName={this.props.member.userId}
                 width={avatarSize}
@@ -330,12 +335,14 @@ interface IInviteDialogState {
     threepidResultsMixin: { user: Member, userId: string}[];
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
+    consultFirst: boolean;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
     busy: boolean,
     errorText: string,
 }
 
+@replaceableComponent("views.dialogs.InviteDialog")
 export default class InviteDialog extends React.PureComponent<IInviteDialogProps, IInviteDialogState> {
     static defaultProps = {
         kind: KIND_DM,
@@ -348,7 +355,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     constructor(props) {
         super(props);
 
-        if (props.kind === KIND_INVITE && !props.roomId) {
+        if ((props.kind === KIND_INVITE) && !props.roomId) {
             throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
         } else if (props.kind === KIND_CALL_TRANSFER && !props.call) {
             throw new Error("When using KIND_CALL_TRANSFER a call is required for an InviteDialog");
@@ -377,6 +384,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             threepidResultsMixin: [],
             canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
             tryingIdentityServer: false,
+            consultFirst: false,
 
             // These two flags are used for the 'Go' button to communicate what is going on.
             busy: false,
@@ -392,6 +400,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     }
 
+    private onConsultFirstChange = (ev) => {
+        this.setState({consultFirst: ev.target.checked});
+    }
+
     static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
@@ -607,13 +619,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     _startDm = async () => {
         this.setState({busy: true});
+        const client = MatrixClientPeg.get();
         const targets = this._convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
         let existingRoom: Room;
         if (targetIds.length === 1) {
-            existingRoom = findDMForUser(MatrixClientPeg.get(), targetIds[0]);
+            existingRoom = findDMForUser(client, targetIds[0]);
         } else {
             existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
         }
@@ -635,7 +648,6 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             // If so, enable encryption in the new room.
             const has3PidMembers = targets.some(t => t instanceof ThreepidMember);
             if (!has3PidMembers) {
-                const client = MatrixClientPeg.get();
                 const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
                 if (allHaveDeviceKeys) {
                     createRoomOptions.encryption = true;
@@ -645,45 +657,52 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
         // Check if it's a traditional DM and create the room if required.
         // TODO: [Canonical DMs] Remove this check and instead just create the multi-person DM
-        let createRoomPromise = Promise.resolve(null) as Promise<string | null | boolean>;
-        const isSelf = targetIds.length === 1 && targetIds[0] === MatrixClientPeg.get().getUserId();
-        if (targetIds.length === 1 && !isSelf) {
-            createRoomOptions.dmUserId = targetIds[0];
-            createRoomPromise = createRoom(createRoomOptions);
-        } else if (isSelf) {
-            createRoomPromise = createRoom(createRoomOptions);
-        } else {
-            // Create a boring room and try to invite the targets manually.
-            createRoomPromise = createRoom(createRoomOptions).then(roomId => {
-                return inviteMultipleToRoom(roomId, targetIds);
-            }).then(result => {
-                if (this._shouldAbortAfterInviteError(result)) {
-                    return true; // abort
-                }
-            });
-        }
+        try {
+            const isSelf = targetIds.length === 1 && targetIds[0] === client.getUserId();
+            if (targetIds.length === 1 && !isSelf) {
+                createRoomOptions.dmUserId = targetIds[0];
+            }
 
-        // the createRoom call will show the room for us, so we don't need to worry about that.
-        createRoomPromise.then(abort => {
-            if (abort === true) return; // only abort on true booleans, not roomIds or something
+            if (targetIds.length > 1) {
+                createRoomOptions.createOpts = targetIds.reduce(
+                    (roomOptions, address) => {
+                        const type = getAddressType(address);
+                        if (type === 'email') {
+                            const invite: IInvite3PID = {
+                                id_server: client.getIdentityServerUrl(true),
+                                medium: 'email',
+                                address,
+                            };
+                            roomOptions.invite_3pid.push(invite);
+                        } else if (type === 'mx-user-id') {
+                            roomOptions.invite.push(address);
+                        }
+                        return roomOptions;
+                    },
+                    { invite: [], invite_3pid: [] },
+                )
+            }
+
+            await createRoom(createRoomOptions);
             this.props.onFinished();
-        }).catch(err => {
+        } catch (err) {
             console.error(err);
             this.setState({
                 busy: false,
-                errorText: _t("We couldn't create your DM. Please check the users you want to invite and try again."),
+                errorText: _t("We couldn't create your DM."),
             });
-        });
+        }
     };
 
-    _inviteUsers = () => {
+    _inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
         this._convertFilter();
         const targets = this._convertFilter();
         const targetIds = targets.map(t => t.userId);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
         if (!room) {
             console.error("Failed to find the room to invite users to");
             this.setState({
@@ -693,12 +712,33 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return;
         }
 
-        inviteMultipleToRoom(this.props.roomId, targetIds).then(result => {
+        try {
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
-        }).catch(err => {
+
+            if (cli.isRoomEncrypted(this.props.roomId)) {
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility == "world_readable" || visibility == "shared") {
+                    const invitedUsers = [];
+                    for (const [addr, state] of Object.entries(result.states)) {
+                        if (state === "invited" && getAddressType(addr) === "mx-user-id") {
+                            invitedUsers.push(addr);
+                        }
+                    }
+                    console.log("Sharing history with", invitedUsers);
+                    cli.sendSharedHistoryKeys(
+                        this.props.roomId, invitedUsers,
+                    );
+                }
+            }
+        } catch (err) {
             console.error(err);
             this.setState({
                 busy: false,
@@ -706,7 +746,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     "We couldn't invite those users. Please check the users you want to invite and try again.",
                 ),
             });
-        });
+        }
     };
 
     _transferCall = async () => {
@@ -719,16 +759,34 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
         }
 
-        this.setState({busy: true});
-        try {
-            await this.props.call.transfer(targetIds[0]);
-            this.setState({busy: false});
-            this.props.onFinished();
-        } catch (e) {
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to transfer call"),
+        if (this.state.consultFirst) {
+            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]);
+
+            dis.dispatch({
+                action: 'place_call',
+                type: this.props.call.type,
+                room_id: dmRoomId,
+                transferee: this.props.call,
             });
+            dis.dispatch({
+                action: 'view_room',
+                room_id: dmRoomId,
+                should_peek: false,
+                joining: false,
+            });
+            this.props.onFinished();
+        } else {
+            this.setState({busy: true});
+            try {
+                await this.props.call.transfer(targetIds[0]);
+                this.setState({busy: false});
+                this.props.onFinished();
+            } catch (e) {
+                this.setState({
+                    busy: false,
+                    errorText: _t("Failed to transfer call"),
+                });
+            }
         }
     };
 
@@ -884,19 +942,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     _toggleMember = (member: Member) => {
-        let filterText = this.state.filterText;
-        const targets = this.state.targets.map(t => t); // cheap clone for mutation
-        const idx = targets.indexOf(member);
-        if (idx >= 0) {
-            targets.splice(idx, 1);
-        } else {
-            targets.push(member);
-            filterText = ""; // clear the filter when the user accepts a suggestion
-        }
-        this.setState({targets, filterText});
+        if (!this.state.busy) {
+            let filterText = this.state.filterText;
+            const targets = this.state.targets.map(t => t); // cheap clone for mutation
+            const idx = targets.indexOf(member);
+            if (idx >= 0) {
+                targets.splice(idx, 1);
+            } else {
+                targets.push(member);
+                filterText = ""; // clear the filter when the user accepts a suggestion
+            }
+            this.setState({targets, filterText});
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+            if (this._editorRef && this._editorRef.current) {
+                this._editorRef.current.focus();
+            }
         }
     };
 
@@ -1187,10 +1247,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let helpText;
         let buttonText;
         let goButtonFn;
+        let consultSection;
+        let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
-        const userId = MatrixClientPeg.get().getUserId();
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
         if (this.props.kind === KIND_DM) {
             title = _t("Direct Messages");
 
@@ -1248,43 +1311,72 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             buttonText = _t("Go");
             goButtonFn = this._startDm;
         } else if (this.props.kind === KIND_INVITE) {
-            title = _t("Invite to this room");
+            const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
+            const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
+            title = isSpace
+                ? _t("Invite to %(spaceName)s", {
+                    spaceName: room.name || _t("Unnamed Space"),
+                })
+                : _t("Invite to %(roomName)s", {
+                    roomName: room.name || _t("Unnamed Room"),
+                });
 
-            if (identityServersEnabled) {
-                helpText = _t(
-                    "Invite someone using their name, email address, username (like <userId/>) or " +
-                        "<a>share this room</a>.",
-                    {},
-                    {
-                        userId: () =>
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
-                        a: (sub) =>
-                            <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">
-                                {sub}
-                            </a>,
-                    },
-                );
+            let helpTextUntranslated;
+            if (isSpace) {
+                if (identityServersEnabled) {
+                    helpTextUntranslated = _td("Invite someone using their name, email address, username " +
+                        "(like <userId/>) or <a>share this space</a>.");
+                } else {
+                    helpTextUntranslated = _td("Invite someone using their name, username " +
+                        "(like <userId/>) or <a>share this space</a>.");
+                }
             } else {
-                helpText = _t(
-                    "Invite someone using their name, username (like <userId/>) or <a>share this room</a>.",
-                    {},
-                    {
-                        userId: () =>
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
-                        a: (sub) =>
-                            <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">
-                                {sub}
-                            </a>,
-                    },
-                );
+                if (identityServersEnabled) {
+                    helpTextUntranslated = _td("Invite someone using their name, email address, username " +
+                        "(like <userId/>) or <a>share this room</a>.");
+                } else {
+                    helpTextUntranslated = _td("Invite someone using their name, username " +
+                        "(like <userId/>) or <a>share this room</a>.");
+                }
             }
 
+            helpText = _t(helpTextUntranslated, {}, {
+                userId: () =>
+                    <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
+                a: (sub) =>
+                    <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
+            });
+
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
+
+            if (cli.isRoomEncrypted(this.props.roomId)) {
+                const room = cli.getRoom(this.props.roomId);
+                const visibilityEvent = room.currentState.getStateEvents(
+                    "m.room.history_visibility", "",
+                );
+                const visibility = visibilityEvent && visibilityEvent.getContent() &&
+                    visibilityEvent.getContent().history_visibility;
+                if (visibility === "world_readable" || visibility === "shared") {
+                    keySharingWarning =
+                        <p className='mx_InviteDialog_helpText'>
+                            <img
+                                src={require("../../../../res/img/element-icons/info.svg")}
+                                width={14} height={14} />
+                            {" " + _t("Invited people will be able to read old messages.")}
+                        </p>;
+                }
+            }
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
             buttonText = _t("Transfer");
             goButtonFn = this._transferCall;
+            consultSection = <div>
+                <label>
+                    <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
+                    {_t("Consult first")}
+                </label>
+            </div>;
         } else {
             console.error("Unknown kind of InviteDialog: " + this.props.kind);
         }
@@ -1314,12 +1406,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             {spinner}
                         </div>
                     </div>
+                    {keySharingWarning}
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
                     <div className='mx_InviteDialog_userSections'>
                         {this._renderSection('recents')}
                         {this._renderSection('suggestions')}
                     </div>
+                    {consultSection}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -24,7 +24,7 @@ export default function KeySignatureUploadFailedDialog({
         source,
         continuation,
         onFinished,
-    }) {
+}) {
     const RETRIES = 2;
     const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -84,10 +84,10 @@ export default function KeySignatureUploadFailedDialog({
     } else {
         body = (<div>
             {success ?
-              <span>{_t("Upload completed")}</span> :
-              cancelled ?
-                <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unable to upload")}</span>}
+                <span>{_t("Upload completed")}</span> :
+                cancelled ?
+                    <span>{_t("Cancelled signature upload")}</span> :
+                    <span>{_t("Unable to upload")}</span>}
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}

src/components/views/dialogs/LogoutDialog.js

@@ -22,7 +22,9 @@ import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.LogoutDialog")
 export default class LogoutDialog extends React.Component {
     defaultProps = {
         onFinished: function() {},

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js

@@ -24,7 +24,9 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.ManualDeviceKeyVerificationDialog")
 export default class ManualDeviceKeyVerificationDialog extends React.Component {
     static propTypes = {
         userId: PropTypes.string.isRequired,

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -21,7 +21,9 @@ import { _t } from '../../../languageHandler';
 import * as sdk from "../../../index";
 import {wantsDateSeparator} from '../../../DateUtils';
 import SettingsStore from '../../../settings/SettingsStore';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.MessageEditHistoryDialog")
 export default class MessageEditHistoryDialog extends React.PureComponent {
     static propTypes = {
         mxEvent: PropTypes.object.isRequired,
@@ -162,8 +164,12 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <BaseDialog className='mx_MessageEditHistoryDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Message edits")}>
+            <BaseDialog
+                className='mx_MessageEditHistoryDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Message edits")}
+            >
                 {content}
             </BaseDialog>
         );

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -38,6 +38,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
@@ -53,6 +54,7 @@ interface IState {
 
 const MAX_BUTTONS = 3;
 
+@replaceableComponent("views.dialogs.ModalWidgetDialog")
 export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
     private readonly widget: Widget;
     private readonly possibleButtons: ModalButtonID[];

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -66,6 +66,10 @@ export default class NewSessionReviewDialog extends React.PureComponent {
         Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
             verificationRequestPromise: requestPromise,
             member: cli.getUser(userId),
+            onFinished: async () => {
+                const request = await requestPromise;
+                request.cancel();
+            },
         });
     }
 

src/components/views/dialogs/ReportEventDialog.js

@@ -18,14 +18,16 @@ import React, {PureComponent} from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import SdkConfig from '../../../SdkConfig';
 import Markdown from '../../../Markdown';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * A dialog for reporting an event.
  */
+@replaceableComponent("views.dialogs.ReportEventDialog")
 export default class ReportEventDialog extends PureComponent {
     static propTypes = {
         mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,

src/components/views/dialogs/RoomSettingsDialog.js

@@ -30,6 +30,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
 export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
@@ -38,6 +39,7 @@ export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
 export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
 export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
 
+@replaceableComponent("views.dialogs.RoomSettingsDialog")
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -114,9 +116,13 @@ export default class RoomSettingsDialog extends React.Component {
 
         const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
         return (
-            <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Room Settings - %(roomName)s", {roomName})}>
-                <div className='ms_SettingsDialog_content'>
+            <BaseDialog
+                className='mx_RoomSettingsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Room Settings - %(roomName)s", {roomName})}
+            >
+                <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} />
                 </div>
             </BaseDialog>

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.RoomUpgradeDialog")
 export default class RoomUpgradeDialog extends React.Component {
     static propTypes = {
         room: PropTypes.object.isRequired,

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -22,7 +22,9 @@ import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
 export default class RoomUpgradeWarningDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -80,6 +82,33 @@ export default class RoomUpgradeWarningDialog extends React.Component {
 
         const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
 
+        let bugReports = (
+            <p>
+                {_t(
+                    "This usually only affects how the room is processed on the server. If you're " +
+                    "having problems with your %(brand)s, please report a bug.", {brand},
+                )}
+            </p>
+        );
+        if (SdkConfig.get().bug_report_endpoint_url) {
+            bugReports = (
+                <p>
+                    {_t(
+                        "This usually only affects how the room is processed on the server. If you're " +
+                        "having problems with your %(brand)s, please <a>report a bug</a>.",
+                        {
+                            brand,
+                        },
+                        {
+                            "a": (sub) => {
+                                return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
+                            },
+                        },
+                    )}
+                </p>
+            );
+        }
+
         return (
             <BaseDialog
                 className='mx_RoomUpgradeWarningDialog'
@@ -95,20 +124,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                             "is unstable due to bugs, missing features or security vulnerabilities.",
                         )}
                     </p>
-                    <p>
-                        {_t(
-                            "This usually only affects how the room is processed on the server. If you're " +
-                            "having problems with your %(brand)s, please <a>report a bug</a>.",
-                            {
-                                brand,
-                            },
-                            {
-                                "a": (sub) => {
-                                    return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
-                                },
-                            },
-                        )}
-                    </p>
+                    {bugReports}
                     <p>
                         {_t(
                             "You'll upgrade this room from <oldVersion /> to <newVersion />.",

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -28,10 +28,12 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { IDialogProps } from "./IDialogProps";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
 
+@replaceableComponent("views.dialogs.ServerOfflineDialog")
 export default class ServerOfflineDialog extends React.PureComponent<IProps> {
     public componentDidMount() {
         EchoStore.instance.on(UPDATE_EVENT, this.onEchosUpdated);

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-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.
@@ -26,6 +26,7 @@ import Field from "../elements/Field";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import withValidation, {IFieldState} from "../elements/Validation";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     title?: string;
@@ -38,6 +39,7 @@ interface IState {
     otherHomeserver: string;
 }
 
+@replaceableComponent("views.dialogs.ServerPickerDialog")
 export default class ServerPickerDialog extends React.PureComponent<IProps, IState> {
     private readonly defaultServer: ValidatedServerConfig;
     private readonly fieldRef = createRef<Field>();
@@ -108,7 +110,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                 console.error(e);
 
                 const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
-                if (stateForError.isFatalError) {
+                if (stateForError.serverErrorIsFatal) {
                     let error = _t("Unable to validate homeserver");
                     if (e.translatedMessage) {
                         error = e.translatedMessage;
@@ -166,7 +168,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
             text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
         }
 
-        let defaultServerName = this.defaultServer.hsName;
+        let defaultServerName: React.ReactNode = this.defaultServer.hsName;
         if (this.defaultServer.hsNameIsDifferent) {
             defaultServerName = (
                 <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -0,0 +1,54 @@
+/*
+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 from 'react';
+import {_t} from "../../../languageHandler";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+import {IDialogProps} from "./IDialogProps";
+
+@replaceableComponent("views.dialogs.SeshatResetDialog")
+export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
+    render() {
+        return (
+            <BaseDialog
+                hasCancel={true}
+                onFinished={this.props.onFinished.bind(null, false)}
+                title={_t("Reset event store?")}>
+                <div>
+                    <p>
+                        {_t("You most likely do not want to reset your event index store")}
+                        <br />
+                        {_t("If you do, please note that none of your messages will be deleted, " +
+                            "but the search experience might be degraded for a few moments " +
+                            "whilst the index is recreated",
+                        )}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Reset event store")}
+                    onPrimaryButtonClick={this.props.onFinished.bind(null, true)}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("Cancel")}
+                    onCancel={this.props.onFinished.bind(null, false)}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -22,8 +22,9 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-
+@replaceableComponent("views.dialogs.SessionRestoreErrorDialog")
 export default class SessionRestoreErrorDialog extends React.Component {
     static propTypes = {
         error: PropTypes.string.isRequired,
@@ -97,7 +98,7 @@ export default class SessionRestoreErrorDialog extends React.Component {
                         "may be incompatible with this version. Close this window and return " +
                         "to the more recent version.",
                         { brand },
-                     ) }</p>
+                    ) }</p>
 
                     <p>{ _t(
                         "Clearing your browser's storage may fix the problem, but will sign you " +

src/components/views/dialogs/SetEmailDialog.js

@@ -22,6 +22,7 @@ import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 
 /*
@@ -29,6 +30,7 @@ import Modal from '../../../Modal';
  *
  * On success, `onFinished(true)` is called.
  */
+@replaceableComponent("views.dialogs.SetEmailDialog")
 export default class SetEmailDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,

src/components/views/dialogs/ShareDialog.tsx

@@ -34,6 +34,7 @@ import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const socials = [
     {
@@ -73,6 +74,7 @@ interface IState {
     permalinkCreator: RoomPermalinkCreator;
 }
 
+@replaceableComponent("views.dialogs.ShareDialog")
 export default class ShareDialog extends React.PureComponent<IProps, IState> {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -0,0 +1,164 @@
+/*
+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, {useState} from 'react';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+
+import {_t} from '../../../languageHandler';
+import {IDialogProps} from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DevtoolsDialog from "./DevtoolsDialog";
+import SpaceBasicSettings from '../spaces/SpaceBasicSettings';
+import {getTopic} from "../elements/RoomTopic";
+import {avatarUrlForRoom} from "../../../Avatar";
+import ToggleSwitch from "../elements/ToggleSwitch";
+import AccessibleButton from "../elements/AccessibleButton";
+import Modal from "../../../Modal";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {allSettled} from "../../../utils/promise";
+import {useDispatcher} from "../../../hooks/useDispatcher";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    space: Room;
+}
+
+const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
+    useDispatcher(defaultDispatcher, ({action, ...params}) => {
+        if (action === "after_leave_room" && params.room_id === space.roomId) {
+            onFinished(false);
+        }
+    });
+
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    const userId = cli.getUserId();
+
+    const [newAvatar, setNewAvatar] = useState<File>(null); // undefined means to remove avatar
+    const canSetAvatar = space.currentState.maySendStateEvent(EventType.RoomAvatar, userId);
+    const avatarChanged = newAvatar !== null;
+
+    const [name, setName] = useState<string>(space.name);
+    const canSetName = space.currentState.maySendStateEvent(EventType.RoomName, userId);
+    const nameChanged = name !== space.name;
+
+    const currentTopic = getTopic(space);
+    const [topic, setTopic] = useState<string>(currentTopic);
+    const canSetTopic = space.currentState.maySendStateEvent(EventType.RoomTopic, userId);
+    const topicChanged = topic !== currentTopic;
+
+    const currentJoinRule = space.getJoinRule();
+    const [joinRule, setJoinRule] = useState(currentJoinRule);
+    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
+    const joinRuleChanged = joinRule !== currentJoinRule;
+
+    const onSave = async () => {
+        setBusy(true);
+        const promises = [];
+
+        if (avatarChanged) {
+            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
+                url: await cli.uploadContent(newAvatar),
+            }, ""));
+        }
+
+        if (nameChanged) {
+            promises.push(cli.setRoomName(space.roomId, name));
+        }
+
+        if (topicChanged) {
+            promises.push(cli.setRoomTopic(space.roomId, topic));
+        }
+
+        if (joinRuleChanged) {
+            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
+        }
+
+        const results = await allSettled(promises);
+        setBusy(false);
+        const failures = results.filter(r => r.status === "rejected");
+        if (failures.length > 0) {
+            console.error("Failed to save space settings: ", failures);
+            setError(_t("Failed to save space settings."));
+        }
+    };
+
+    return <BaseDialog
+        title={_t("Space settings")}
+        className="mx_SpaceSettingsDialog"
+        contentId="mx_SpaceSettingsDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
+            <div>{ _t("Edit settings relating to your space.") }</div>
+
+            { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
+
+            <SpaceBasicSettings
+                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
+                avatarDisabled={!canSetAvatar}
+                setAvatar={setNewAvatar}
+                name={name}
+                nameDisabled={!canSetName}
+                setName={setName}
+                topic={topic}
+                topicDisabled={!canSetTopic}
+                setTopic={setTopic}
+            />
+
+            <div>
+                { _t("Make this space private") }
+                <ToggleSwitch
+                    checked={joinRule !== "public"}
+                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
+                    disabled={!canSetJoinRule}
+                    aria-label={_t("Make this space private")}
+                />
+            </div>
+
+            <AccessibleButton
+                kind="danger"
+                onClick={() => {
+                    defaultDispatcher.dispatch({
+                        action: "leave_room",
+                        room_id: space.roomId,
+                    });
+                }}
+            >
+                { _t("Leave Space") }
+            </AccessibleButton>
+
+            <div className="mx_SpaceSettingsDialog_buttons">
+                <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
+                    { _t("View dev tools") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
+                    { busy ? _t("Saving...") : _t("Save Changes") }
+                </AccessibleButton>
+            </div>
+        </div>
+    </BaseDialog>;
+};
+
+export default SpaceSettingsDialog;
+

src/components/views/dialogs/StorageEvictedDialog.js

@@ -20,7 +20,9 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.StorageEvictedDialog")
 export default class StorageEvictedDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -43,10 +45,12 @@ export default class StorageEvictedDialog extends React.Component {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(
-                "To help us prevent this in future, please <a>send us logs</a>.", {},
-            {
-                a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
-            });
+                "To help us prevent this in future, please <a>send us logs</a>.",
+                {},
+                {
+                    a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
+                },
+            );
         }
 
         return (

src/components/views/dialogs/TabbedIntegrationManagerDialog.js

@@ -17,12 +17,14 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk";
+import {Room} from "matrix-js-sdk/src/models/room";
 import * as sdk from '../../../index';
 import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
 import classNames from 'classnames';
 import * as ScalarMessaging from "../../../ScalarMessaging";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog")
 export default class TabbedIntegrationManagerDialog extends React.Component {
     static propTypes = {
         /**

src/components/views/dialogs/TermsDialog.js

@@ -20,7 +20,8 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
-import Matrix from 'matrix-js-sdk';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
 
 class TermsCheckbox extends React.PureComponent {
     static propTypes = {
@@ -41,6 +42,7 @@ class TermsCheckbox extends React.PureComponent {
     }
 }
 
+@replaceableComponent("views.dialogs.TermsDialog")
 export default class TermsDialog extends React.PureComponent {
     static propTypes = {
         /**
@@ -83,22 +85,22 @@ export default class TermsDialog extends React.PureComponent {
 
     _nameForServiceType(serviceType, host) {
         switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                 return <div>{_t("Identity Server")}<br />({host})</div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                 return <div>{_t("Integration Manager")}<br />({host})</div>;
         }
     }
 
     _summaryForServiceType(serviceType) {
         switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                 return <div>
                     {_t("Find others by phone or email")}
                     <br />
                     {_t("Be found by phone or email")}
                 </div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                 return <div>
                     {_t("Use bots, bridges, widgets and sticker packs")}
                 </div>;

src/components/views/dialogs/TextInputDialog.js

@@ -19,7 +19,9 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import Field from "../elements/Field";
 import { _t, _td } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.TextInputDialog")
 export default class TextInputDialog extends React.Component {
     static propTypes = {
         title: PropTypes.string,

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,18 +16,23 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import filesize from "filesize";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { getBlobSafeMimeType } from '../../../utils/blobs';
 
-export default class UploadConfirmDialog extends React.Component {
-    static propTypes = {
-        file: PropTypes.object.isRequired,
-        currentIndex: PropTypes.number,
-        totalFiles: PropTypes.number,
-        onFinished: PropTypes.func.isRequired,
-    }
+interface IProps {
+    file: File;
+    currentIndex: number;
+    totalFiles?: number;
+    onFinished: (uploadConfirmed: boolean, uploadAll?: boolean) => void;
+}
+
+@replaceableComponent("views.dialogs.UploadConfirmDialog")
+export default class UploadConfirmDialog extends React.Component<IProps> {
+    private objectUrl: string;
+    private mimeType: string;
 
     static defaultProps = {
         totalFiles: 1,
@@ -36,22 +41,28 @@ export default class UploadConfirmDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._objectUrl = URL.createObjectURL(props.file);
+        // Create a fresh `Blob` for previewing (even though `File` already is
+        // one) so we can adjust the MIME type if needed.
+        this.mimeType = getBlobSafeMimeType(props.file.type);
+        const blob = new Blob([props.file], { type:
+            this.mimeType,
+        });
+        this.objectUrl = URL.createObjectURL(blob);
     }
 
     componentWillUnmount() {
-        if (this._objectUrl) URL.revokeObjectURL(this._objectUrl);
+        if (this.objectUrl) URL.revokeObjectURL(this.objectUrl);
     }
 
-    _onCancelClick = () => {
+    private onCancelClick = () => {
         this.props.onFinished(false);
     }
 
-    _onUploadClick = () => {
+    private onUploadClick = () => {
         this.props.onFinished(true);
     }
 
-    _onUploadAllClick = () => {
+    private onUploadAllClick = () => {
         this.props.onFinished(true, true);
     }
 
@@ -73,10 +84,10 @@ export default class UploadConfirmDialog extends React.Component {
         }
 
         let preview;
-        if (this.props.file.type.startsWith('image/')) {
+        if (this.mimeType.startsWith('image/')) {
             preview = <div className="mx_UploadConfirmDialog_previewOuter">
                 <div className="mx_UploadConfirmDialog_previewInner">
-                    <div><img className="mx_UploadConfirmDialog_imagePreview" src={this._objectUrl} /></div>
+                    <div><img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} /></div>
                     <div>{this.props.file.name} ({filesize(this.props.file.size)})</div>
                 </div>
             </div>;
@@ -93,7 +104,7 @@ export default class UploadConfirmDialog extends React.Component {
 
         let uploadAllButton;
         if (this.props.currentIndex + 1 < this.props.totalFiles) {
-            uploadAllButton = <button onClick={this._onUploadAllClick}>
+            uploadAllButton = <button onClick={this.onUploadAllClick}>
                 {_t("Upload all")}
             </button>;
         }
@@ -101,7 +112,7 @@ export default class UploadConfirmDialog extends React.Component {
         return (
             <BaseDialog className='mx_UploadConfirmDialog'
                 fixedWidth={false}
-                onFinished={this._onCancelClick}
+                onFinished={this.onCancelClick}
                 title={title}
                 contentId='mx_Dialog_content'
             >
@@ -111,7 +122,7 @@ export default class UploadConfirmDialog extends React.Component {
 
                 <DialogButtons primaryButton={_t('Upload')}
                     hasCancel={false}
-                    onPrimaryButtonClick={this._onUploadClick}
+                    onPrimaryButtonClick={this.onUploadClick}
                     focus={true}
                 >
                     {uploadAllButton}

src/components/views/dialogs/UploadFailureDialog.js

@@ -21,12 +21,14 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
  * Tells the user about files we know cannot be uploaded before we even try uploading
  * them. This is named fairly generically but the only thing we check right now is
  * the size of the file.
  */
+@replaceableComponent("views.dialogs.UploadFailureDialog")
 export default class UploadFailureDialog extends React.Component {
     static propTypes = {
         badFiles: PropTypes.arrayOf(PropTypes.object).isRequired,

src/components/views/dialogs/UserSettingsDialog.js

@@ -33,6 +33,7 @@ import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 import {UIFeature} from "../../../settings/UIFeature";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
 export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
@@ -45,6 +46,7 @@ export const USER_LABS_TAB = "USER_LABS_TAB";
 export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB";
 export const USER_HELP_TAB = "USER_HELP_TAB";
 
+@replaceableComponent("views.dialogs.UserSettingsDialog")
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -153,9 +155,13 @@ export default class UserSettingsDialog extends React.Component {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         return (
-            <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Settings")}>
-                <div className='ms_SettingsDialog_content'>
+            <BaseDialog
+                className='mx_UserSettingsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Settings")}
+            >
+                <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
             </BaseDialog>

src/components/views/dialogs/VerificationRequestDialog.js

@@ -19,17 +19,19 @@ import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.VerificationRequestDialog")
 export default class VerificationRequestDialog extends React.Component {
     static propTypes = {
         verificationRequest: PropTypes.object,
         verificationRequestPromise: PropTypes.object,
         onFinished: PropTypes.func.isRequired,
+        member: PropTypes.string,
     };
 
     constructor(...args) {
         super(...args);
-        this.onFinished = this.onFinished.bind(this);
         this.state = {};
         if (this.props.verificationRequest) {
             this.state.verificationRequest = this.props.verificationRequest;
@@ -48,13 +50,15 @@ export default class VerificationRequestDialog extends React.Component {
         const member = this.props.member ||
             otherUserId && MatrixClientPeg.get().getUser(otherUserId);
         const title = request && request.isSelfVerification ?
-            _t("Verify other session") : _t("Verification Request");
+            _t("Verify other login") : _t("Verification Request");
 
-        return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
-                contentId="mx_Dialog_content"
-                title={title}
-                hasCancel={true}
-            >
+        return <BaseDialog
+            className="mx_InfoDialog"
+            onFinished={this.props.onFinished}
+            contentId="mx_Dialog_content"
+            title={title}
+            hasCancel={true}
+        >
             <EncryptionPanel
                 layout="dialog"
                 verificationRequest={this.props.verificationRequest}
@@ -64,13 +68,4 @@ export default class VerificationRequestDialog extends React.Component {
             />
         </BaseDialog>;
     }
-
-    async onFinished() {
-        this.props.onFinished();
-        let request = this.props.verificationRequest;
-        if (!request && this.props.verificationRequestPromise) {
-            request = await this.props.verificationRequestPromise;
-        }
-        request.cancel();
-    }
 }

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -29,6 +29,7 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import DialogButtons from "../elements/DialogButtons";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export function getRememberedCapabilitiesForWidget(widget: Widget): Capability[] {
     return JSON.parse(localStorage.getItem(`widget_${widget.id}_approved_caps`) || "[]");
@@ -54,6 +55,7 @@ interface IState {
     rememberSelection: boolean;
 }
 
+@replaceableComponent("views.dialogs.WidgetCapabilitiesPromptDialog")
 export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<IProps, IState> {
     private eventPermissionsMap = new Map<Capability, WidgetEventCapability>();
 

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js

@@ -21,7 +21,9 @@ import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {Widget} from "matrix-widget-api";
 import {OIDCState, WidgetPermissionStore} from "../../../stores/widgets/WidgetPermissionStore";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.WidgetOpenIDPermissionsDialog")
 export default class WidgetOpenIDPermissionsDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -68,9 +70,12 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_WidgetOpenIDPermissionsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Allow this widget to verify your identity")}>
+            <BaseDialog
+                className='mx_WidgetOpenIDPermissionsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Allow this widget to verify your identity")}
+            >
                 <div className='mx_WidgetOpenIDPermissionsDialog_content'>
                     <p>
                         {_t("The widget will verify your user ID, but won't be able to perform actions for you:")}

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,14 +16,17 @@ limitations under the License.
 
 import {debounce} from "lodash";
 import classNames from 'classnames';
-import React from 'react';
-import PropTypes from "prop-types";
+import React, {ChangeEvent, FormEvent} from 'react';
+import {ISecretStorageKeyInfo} from "matrix-js-sdk/src";
+
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import Field from '../../elements/Field';
 import AccessibleButton from '../../elements/AccessibleButton';
-
-import { _t } from '../../../../languageHandler';
+import {_t} from '../../../../languageHandler';
+import {IDialogProps} from "../IDialogProps";
+import {accessSecretStorage} from "../../../../SecurityManager";
+import Modal from "../../../../Modal";
 
 // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
 // so this should be plenty and allow for people putting extra whitespace in the file because
@@ -34,22 +36,31 @@ const KEY_FILE_MAX_SIZE = 128;
 // Don't shout at the user that their key is invalid every time they type a key: wait a short time
 const VALIDATION_THROTTLE_MS = 200;
 
+interface IProps extends IDialogProps {
+    keyInfo: ISecretStorageKeyInfo;
+    checkPrivateKey: (k: {passphrase?: string, recoveryKey?: string}) => boolean;
+}
+
+interface IState {
+    recoveryKey: string;
+    recoveryKeyValid: boolean | null;
+    recoveryKeyCorrect: boolean | null;
+    recoveryKeyFileError: boolean | null;
+    forceRecoveryKey: boolean;
+    passPhrase: string;
+    keyMatches: boolean | null;
+    resetting: boolean;
+}
+
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
  */
-export default class AccessSecretStorageDialog extends React.PureComponent {
-    static propTypes = {
-        // { passphrase, pubkey }
-        keyInfo: PropTypes.object.isRequired,
-        // Function from one of { passphrase, recoveryKey } -> boolean
-        checkPrivateKey: PropTypes.func.isRequired,
-    }
+export default class AccessSecretStorageDialog extends React.PureComponent<IProps, IState> {
+    private fileUpload = React.createRef<HTMLInputElement>();
 
     constructor(props) {
         super(props);
 
-        this._fileUpload = React.createRef();
-
         this.state = {
             recoveryKey: "",
             recoveryKeyValid: null,
@@ -58,24 +69,28 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             keyMatches: null,
+            resetting: false,
         };
     }
 
-    _onCancel = () => {
+    private onCancel = () => {
+        if (this.state.resetting) {
+            this.setState({resetting: false});
+        }
         this.props.onFinished(false);
-    }
+    };
 
-    _onUseRecoveryKeyClick = () => {
+    private onUseRecoveryKeyClick = () => {
         this.setState({
             forceRecoveryKey: true,
         });
-    }
+    };
 
-    _validateRecoveryKeyOnChange = debounce(() => {
-        this._validateRecoveryKey();
+    private validateRecoveryKeyOnChange = debounce(async () => {
+        await this.validateRecoveryKey();
     }, VALIDATION_THROTTLE_MS);
 
-    async _validateRecoveryKey() {
+    private async validateRecoveryKey() {
         if (this.state.recoveryKey === '') {
             this.setState({
                 recoveryKeyValid: null,
@@ -102,27 +117,27 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         }
     }
 
-    _onRecoveryKeyChange = (e) => {
+    private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            recoveryKey: e.target.value,
+            recoveryKey: ev.target.value,
             recoveryKeyFileError: null,
         });
 
         // also clear the file upload control so that the user can upload the same file
         // the did before (otherwise the onchange wouldn't fire)
-        if (this._fileUpload.current) this._fileUpload.current.value = null;
+        if (this.fileUpload.current) this.fileUpload.current.value = null;
 
         // We don't use Field's validation here because a) we want it in a separate place rather
         // than in a tooltip and b) we want it to display feedback based on the uploaded file
         // as well as the text box. Ideally we would refactor Field's validation logic so we could
         // re-use some of it.
-        this._validateRecoveryKeyOnChange();
-    }
+        this.validateRecoveryKeyOnChange();
+    };
 
-    _onRecoveryKeyFileChange = async e => {
-        if (e.target.files.length === 0) return;
+    private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>) => {
+        if (ev.target.files.length === 0) return;
 
-        const f = e.target.files[0];
+        const f = ev.target.files[0];
 
         if (f.size > KEY_FILE_MAX_SIZE) {
             this.setState({
@@ -140,7 +155,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     recoveryKeyFileError: null,
                     recoveryKey: contents.trim(),
                 });
-                this._validateRecoveryKey();
+                await this.validateRecoveryKey();
             } else {
                 this.setState({
                     recoveryKeyFileError: true,
@@ -150,14 +165,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 });
             }
         }
+    };
+
+    private onRecoveryKeyFileUploadClick = () => {
+        this.fileUpload.current.click();
     }
 
-    _onRecoveryKeyFileUploadClick = () => {
-        this._fileUpload.current.click();
-    }
-
-    _onPassPhraseNext = async (e) => {
-        e.preventDefault();
+    private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (this.state.passPhrase.length <= 0) return;
 
@@ -169,10 +184,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onRecoveryKeyNext = async (e) => {
-        e.preventDefault();
+    private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement>) => {
+        ev.preventDefault();
 
         if (!this.state.recoveryKeyValid) return;
 
@@ -184,16 +199,65 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         } else {
             this.setState({ keyMatches });
         }
-    }
+    };
 
-    _onPassPhraseChange = (e) => {
+    private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            passPhrase: e.target.value,
+            passPhrase: ev.target.value,
             keyMatches: null,
         });
-    }
+    };
 
-    getKeyValidationText() {
+    private onResetAllClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+        ev.preventDefault();
+        this.setState({resetting: true});
+    };
+
+    private onConfirmResetAllClick = async () => {
+        // Hide ourselves so the user can interact with the reset dialogs.
+        // We don't conclude the promise chain (onFinished) yet to avoid confusing
+        // any upstream code flows.
+        //
+        // Note: this will unmount us, so don't call `setState` or anything in the
+        // rest of this function.
+        Modal.toggleCurrentDialogVisibility();
+
+        try {
+            // Force reset secret storage (which resets the key backup)
+            await accessSecretStorage(async () => {
+                // Now reset cross-signing so everything Just Works™ again.
+                const cli = MatrixClientPeg.get();
+                await cli.bootstrapCrossSigning({
+                    authUploadDeviceSigningKeys: async (makeRequest) => {
+                        // XXX: Making this an import breaks the app.
+                        const InteractiveAuthDialog = sdk.getComponent("views.dialogs.InteractiveAuthDialog");
+                        const {finished} = Modal.createTrackedDialog(
+                            'Cross-signing keys dialog', '', InteractiveAuthDialog,
+                            {
+                                title: _t("Setting up keys"),
+                                matrixClient: cli,
+                                makeRequest,
+                            },
+                        );
+                        const [confirmed] = await finished;
+                        if (!confirmed) {
+                            throw new Error("Cross-signing key upload auth canceled");
+                        }
+                    },
+                    setupNewCrossSigning: true,
+                });
+
+                // Now we can indicate that the user is done pressing buttons, finally.
+                // Upstream flows will detect the new secret storage, key backup, etc and use it.
+                this.props.onFinished(true);
+            }, true);
+        } catch (e) {
+            console.error(e);
+            this.props.onFinished(false);
+        }
+    };
+
+    private getKeyValidationText(): string {
         if (this.state.recoveryKeyFileError) {
             return _t("Wrong file type");
         } else if (this.state.recoveryKeyCorrect) {
@@ -208,7 +272,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        // Caution: Making these an import will break tests.
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
 
         const hasPassphrase = (
             this.props.keyInfo &&
@@ -217,11 +283,36 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             this.props.keyInfo.passphrase.iterations
         );
 
+        const resetButton = (
+            <div className="mx_AccessSecretStorageDialog_reset">
+                {_t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
+                    a: (sub) => <a
+                        href="" onClick={this.onResetAllClick}
+                        className="mx_AccessSecretStorageDialog_reset_link">{sub}</a>,
+                })}
+            </div>
+        );
+
         let content;
         let title;
         let titleClass;
-        if (hasPassphrase && !this.state.forceRecoveryKey) {
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        if (this.state.resetting) {
+            title = _t("Reset everything");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_resetBadge'];
+            content = <div>
+                <p>{_t("Only do this if you have no other device to complete verification with.")}</p>
+                <p>{_t("If you reset everything, you will restart with no trusted sessions, no trusted users, and "
+                    + "might not be able to see past messages.")}</p>
+                <DialogButtons
+                    primaryButton={_t('Reset')}
+                    onPrimaryButtonClick={this.onConfirmResetAllClick}
+                    hasCancel={true}
+                    onCancel={this.onCancel}
+                    focus={false}
+                    primaryButtonClass="danger"
+                />
+            </div>;
+        } else if (hasPassphrase && !this.state.forceRecoveryKey) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             title = _t("Security Phrase");
             titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
@@ -244,18 +335,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {
                         button: s => <AccessibleButton className="mx_linkButton"
                             element="span"
-                            onClick={this._onUseRecoveryKeyClick}
+                            onClick={this.onUseRecoveryKeyClick}
                         >
                             {s}
                         </AccessibleButton>,
                     },
                 )}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                     <input
                         type="password"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
-                        onChange={this._onPassPhraseChange}
+                        onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}
                         autoFocus={true}
                         autoComplete="new-password"
@@ -264,18 +355,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {keyStatus}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onPassPhraseNext}
+                        onPrimaryButtonClick={this.onPassPhraseNext}
                         hasCancel={true}
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={this.state.passPhrase.length === 0}
+                        additive={resetButton}
                     />
                 </form>
             </div>;
         } else {
             title = _t("Security Key");
             titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
             const feedbackClasses = classNames({
                 'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
@@ -291,7 +382,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
                 <form
                     className="mx_AccessSecretStorageDialog_primaryContainer"
-                    onSubmit={this._onRecoveryKeyNext}
+                    onSubmit={this.onRecoveryKeyNext}
                     spellCheck={false}
                     autoComplete="off"
                 >
@@ -301,7 +392,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 type="password"
                                 label={_t('Security Key')}
                                 value={this.state.recoveryKey}
-                                onChange={this._onRecoveryKeyChange}
+                                onChange={this.onRecoveryKeyChange}
                                 forceValidity={this.state.recoveryKeyCorrect}
                                 autoComplete="off"
                             />
@@ -312,10 +403,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         <div>
                             <input type="file"
                                 className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
-                                ref={this._fileUpload}
-                                onChange={this._onRecoveryKeyFileChange}
+                                ref={this.fileUpload}
+                                onChange={this.onRecoveryKeyFileChange}
                             />
-                            <AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}>
+                            <AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
                                 {_t("Upload")}
                             </AccessibleButton>
                         </div>
@@ -323,13 +414,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     {recoveryKeyFeedback}
                     <DialogButtons
                         primaryButton={_t('Continue')}
-                        onPrimaryButtonClick={this._onRecoveryKeyNext}
+                        onPrimaryButtonClick={this.onRecoveryKeyNext}
                         hasCancel={true}
                         cancelButton={_t("Go Back")}
                         cancelButtonClass='danger'
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
+                        additive={resetButton}
                     />
                 </form>
             </div>;
@@ -341,9 +433,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 title={title}
                 titleClass={titleClass}
             >
-            <div>
-                {content}
-            </div>
+                <div>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }

src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js

@@ -18,7 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../languageHandler";
 import * as sdk from "../../../../index";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
 
+@replaceableComponent("views.dialogs.security.ConfirmDestroyCrossSigningDialog")
 export default class ConfirmDestroyCrossSigningDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -38,10 +40,11 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component {
 
         return (
             <BaseDialog
-                    className='mx_ConfirmDestroyCrossSigningDialog'
-                    hasCancel={true}
-                    onFinished={this.props.onFinished}
-                    title={_t("Destroy cross-signing keys?")}>
+                className='mx_ConfirmDestroyCrossSigningDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Destroy cross-signing keys?")}
+            >
                 <div className='mx_ConfirmDestroyCrossSigningDialog_content'>
                     <p>
                         {_t(

src/components/views/dialogs/security/CreateCrossSigningDialog.js

@@ -25,12 +25,14 @@ import DialogButtons from '../../elements/DialogButtons';
 import BaseDialog from '../BaseDialog';
 import Spinner from '../../elements/Spinner';
 import InteractiveAuthDialog from '../InteractiveAuthDialog';
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
 
 /*
  * Walks the user through the process of creating a cross-signing keys. In most
  * cases, only a spinner is shown, but for more complex auth like SSO, the user
  * may need to complete some steps to proceed.
  */
+@replaceableComponent("views.dialogs.security.CreateCrossSigningDialog")
 export default class CreateCrossSigningDialog extends React.PureComponent {
     static propTypes = {
         accountPassword: PropTypes.string,

src/components/views/dialogs/security/RestoreKeyBackupDialog.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';
 
@@ -373,21 +373,24 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 {_t(
                     "If you've forgotten your Security Phrase you can "+
                     "<button1>use your Security Key</button1> or " +
-                    "<button2>set up new recovery options</button2>"
-                , {}, {
-                    button1: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onUseRecoveryKeyClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                    button2: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
+                    "<button2>set up new recovery options</button2>",
+                    {},
+                    {
+                        button1: s => <AccessibleButton
+                            className="mx_linkButton"
+                            element="span"
+                            onClick={this._onUseRecoveryKeyClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                        button2: s => <AccessibleButton
+                            className="mx_linkButton"
+                            element="span"
+                            onClick={this._onResetRecoveryClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    })}
             </div>;
         } else {
             title = _t("Enter Security Key");
@@ -435,15 +438,17 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 </div>
                 {_t(
                     "If you've forgotten your Security Key you can "+
-                    "<button>set up new recovery options</button>"
-                , {}, {
-                    button: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
+                    "<button>set up new recovery options</button>",
+                    {},
+                    {
+                        button: s => <AccessibleButton className="mx_linkButton"
+                            element="span"
+                            onClick={this._onResetRecoveryClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    },
+                )}
             </div>;
         }
 
@@ -452,9 +457,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div className='mx_RestoreKeyBackupDialog_content'>
-                {content}
-            </div>
+                <div className='mx_RestoreKeyBackupDialog_content'>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }

src/components/views/dialogs/security/SetupEncryptionDialog.js

@@ -20,6 +20,7 @@ import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
 import BaseDialog from '../BaseDialog';
 import { _t } from '../../../../languageHandler';
 import { SetupEncryptionStore, PHASE_DONE } from '../../../../stores/SetupEncryptionStore';
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
 
 function iconFromPhase(phase) {
     if (phase === PHASE_DONE) {
@@ -29,6 +30,7 @@ function iconFromPhase(phase) {
     }
 }
 
+@replaceableComponent("views.dialogs.security.SetupEncryptionDialog")
 export default class SetupEncryptionDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -20,6 +20,7 @@ import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
 import Tooltip from './Tooltip';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
@@ -33,6 +34,7 @@ interface IState {
     hover: boolean;
 }
 
+@replaceableComponent("views.elements.AccessibleTooltipButton")
 export default class AccessibleTooltipButton extends React.PureComponent<ITooltipProps, IState> {
     constructor(props: ITooltipProps) {
         super(props);

src/components/views/elements/ActionButton.js

@@ -20,7 +20,9 @@ import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.ActionButton")
 export default class ActionButton extends React.Component {
     static propTypes = {
         size: PropTypes.string,
@@ -68,8 +70,8 @@ export default class ActionButton extends React.Component {
         }
 
         const icon = this.props.iconPath ?
-                (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
-                undefined;
+            (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
+            undefined;
 
         const classNames = ["mx_RoleButton"];
         if (this.props.className) {

src/components/views/elements/AddressSelector.js

@@ -20,7 +20,9 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.AddressSelector")
 export default class AddressSelector extends React.Component {
     static propTypes = {
         onSelected: PropTypes.func.isRequired,

src/components/views/elements/AddressTile.js

@@ -19,11 +19,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import { UserAddressType } from '../../../UserAddress.js';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {mediaFromMxc} from "../../../customisations/Media";
 
-
+@replaceableComponent("views.elements.AddressTile")
 export default class AddressTile extends React.Component {
     static propTypes = {
         address: UserAddressType.isRequired,
@@ -46,9 +47,7 @@ export default class AddressTile extends React.Component {
         const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType);
 
         if (isMatrixAddress && address.avatarMxc) {
-            imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
-                address.avatarMxc, 25, 25, 'crop',
-            ));
+            imgUrls.push(mediaFromMxc(address.avatarMxc).getSquareThumbnailHttp(25));
         } else if (address.addressType === 'email') {
             imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }

src/components/views/elements/AppPermission.js

@@ -24,7 +24,9 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import WidgetUtils from "../../../utils/WidgetUtils";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.AppPermission")
 export default class AppPermission extends React.Component {
     static propTypes = {
         url: PropTypes.string.isRequired,

src/components/views/elements/AppTile.js

@@ -38,7 +38,9 @@ import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions
 import {MatrixCapabilities} from "matrix-widget-api";
 import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.AppTile")
 export default class AppTile extends React.Component {
     constructor(props) {
         super(props);
@@ -107,7 +109,7 @@ export default class AppTile extends React.Component {
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:",
-            parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
+                parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
             return true;
         }
         return false;
@@ -325,9 +327,13 @@ export default class AppTile extends React.Component {
 
         // Additional iframe feature pemissions
         // (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
-        const iframeFeatures = "microphone; camera; encrypted-media; autoplay; display-capture;";
+        const iframeFeatures = "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write;";
 
         const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini  ' : ' ');
+        const appTileBodyStyles = {};
+        if (this.props.pointerEvents) {
+            appTileBodyStyles['pointer-events'] = this.props.pointerEvents;
+        }
 
         const loadingElement = (
             <div className="mx_AppLoading_spinner_fadeIn">
@@ -338,7 +344,7 @@ export default class AppTile extends React.Component {
             // only possible for room widgets, can assert this.props.room here
             const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
             appTileBody = (
-                <div className={appTileBodyClass}>
+                <div className={appTileBodyClass} style={appTileBodyStyles}>
                     <AppPermission
                         roomId={this.props.room.roomId}
                         creatorUserId={this.props.creatorUserId}
@@ -350,20 +356,20 @@ export default class AppTile extends React.Component {
             );
         } else if (this.state.initialising) {
             appTileBody = (
-                <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')} style={appTileBodyStyles}>
                     { loadingElement }
                 </div>
             );
         } else {
             if (this.isMixedContent()) {
                 appTileBody = (
-                    <div className={appTileBodyClass}>
+                    <div className={appTileBodyClass} style={appTileBodyStyles}>
                         <AppWarning errorMsg="Error - Mixed content" />
                     </div>
                 );
             } else {
                 appTileBody = (
-                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')} style={appTileBodyStyles}>
                         { this.state.loading && loadingElement }
                         <iframe
                             allow={iframeFeatures}
@@ -477,6 +483,8 @@ AppTile.propTypes = {
     showPopout: PropTypes.bool,
     // Is this an instance of a user widget
     userWidget: PropTypes.bool,
+    // sets the pointer-events property on the iframe
+    pointerEvents: PropTypes.string,
 };
 
 AppTile.defaultProps = {

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -19,6 +19,7 @@ import { _t } from '../../../languageHandler';
 import BaseDialog from "..//dialogs/BaseDialog"
 import AccessibleButton from './AccessibleButton';
 import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export interface DesktopCapturerSource {
     id: string;
@@ -69,6 +70,7 @@ export interface DesktopCapturerSourcePickerIProps {
     onFinished(source: DesktopCapturerSource): void;
 }
 
+@replaceableComponent("views.elements.DesktopCapturerSourcePicker")
 export default class DesktopCapturerSourcePicker extends React.Component<
     DesktopCapturerSourcePickerIProps,
     DesktopCapturerSourcePickerIState

src/components/views/elements/DialogButtons.js

@@ -19,10 +19,12 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /**
  * Basic container for buttons in modal dialogs.
  */
+@replaceableComponent("views.elements.DialogButtons")
 export default class DialogButtons extends React.Component {
     static propTypes = {
         // The primary button which is styled differently and has default focus.

src/components/views/elements/DirectorySearchBox.js

@@ -18,7 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.DirectorySearchBox")
 export default class DirectorySearchBox extends React.Component {
     constructor(props) {
         super(props);

src/components/views/elements/Draggable.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     className: string;
@@ -33,6 +34,7 @@ export interface ILocationState {
     currentY: number;
 }
 
+@replaceableComponent("views.elements.Draggable")
 export default class Draggable extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/Dropdown.js

@@ -22,6 +22,7 @@ import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 class MenuOption extends React.Component {
     constructor(props) {
@@ -83,6 +84,7 @@ MenuOption.propTypes = {
  *
  * TODO: Port NetworkDropdown to use this.
  */
+@replaceableComponent("views.elements.Dropdown")
 export default class Dropdown extends React.Component {
     constructor(props) {
         super(props);

src/components/views/elements/EditableItemList.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import {_t} from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export class EditableItem extends React.Component {
     static propTypes = {
@@ -64,12 +65,18 @@ export class EditableItem extends React.Component {
                     <span className="mx_EditableItem_promptText">
                         {_t("Are you sure?")}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
-                                      className="mx_EditableItem_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="primary_sm"
+                        className="mx_EditableItem_confirmBtn"
+                    >
                         {_t("Yes")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
-                                      className="mx_EditableItem_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="danger_sm"
+                        className="mx_EditableItem_confirmBtn"
+                    >
                         {_t("No")}
                     </AccessibleButton>
                 </div>
@@ -85,6 +92,7 @@ export class EditableItem extends React.Component {
     }
 }
 
+@replaceableComponent("views.elements.EditableItemList")
 export default class EditableItemList extends React.Component {
     static propTypes = {
         id: PropTypes.string.isRequired,
@@ -119,11 +127,15 @@ export default class EditableItemList extends React.Component {
 
     _renderNewItemField() {
         return (
-            <form onSubmit={this._onItemAdded} autoComplete="off"
-                  noValidate={true} className="mx_EditableItemList_newItem">
+            <form
+                onSubmit={this._onItemAdded}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_EditableItemList_newItem"
+            >
                 <Field label={this.props.placeholder} type="text"
-                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
-                       list={this.props.suggestionsListId} />
+                    autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
+                    list={this.props.suggestionsListId} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
                     {_t("Add")}
                 </AccessibleButton>

src/components/views/elements/EditableText.js

@@ -18,7 +18,9 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {Key} from "../../../Keyboard";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.elements.EditableText")
 export default class EditableText extends React.Component {
     static propTypes = {
         onValueChanged: PropTypes.func,
@@ -219,13 +221,15 @@ export default class EditableText extends React.Component {
             </div>;
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
-            editableEl = <div ref={this._editable_div}
-                              contentEditable={true}
-                              className={className}
-                              onKeyDown={this.onKeyDown}
-                              onKeyUp={this.onKeyUp}
-                              onFocus={this.onFocus}
-                              onBlur={this.onBlur} />;
+            editableEl = <div
+                ref={this._editable_div}
+                contentEditable={true}
+                className={className}
+                onKeyDown={this.onKeyDown}
+                onKeyUp={this.onKeyUp}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            />;
         }
 
         return editableEl;

src/components/views/elements/EditableTextContainer.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /**
  * A component which wraps an EditableText, with a spinner while updates take
@@ -29,6 +30,7 @@ import * as sdk from '../../../index';
  * similarly asynchronous way. If this is not provided, the initial value is
  * taken from the 'initialValue' property.
  */
+@replaceableComponent("views.elements.EditableTextContainer")
 export default class EditableTextContainer extends React.Component {
     constructor(props) {
         super(props);