Merge branch 'develop' into ctrl-enter-send

src/components/views/auth/CaptchaForm.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 const DIV_ID = 'mx_recaptcha';
 
@@ -45,6 +46,8 @@ export default class CaptchaForm extends React.Component {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();
+
+        CountlyAnalytics.instance.track("onboarding_grecaptcha_begin");
     }
 
     componentDidMount() {
@@ -99,10 +102,16 @@ export default class CaptchaForm extends React.Component {
         console.log("Loaded recaptcha script.");
         try {
             this._renderRecaptcha(DIV_ID);
+            // clear error if re-rendered
+            this.setState({
+                errorText: null,
+            });
+            CountlyAnalytics.instance.track("onboarding_grecaptcha_loaded");
         } catch (e) {
             this.setState({
                 errorText: e.toString(),
             });
+            CountlyAnalytics.instance.track("onboarding_grecaptcha_error", { error: e.toString() });
         }
     }
 

src/components/views/auth/CountryDropdown.js

@@ -123,7 +123,7 @@ export default class CountryDropdown extends React.Component {
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
-                { country.name } (+{ country.prefix })
+                { _t(country.name) } (+{ country.prefix })
             </div>;
         });
 

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -25,6 +25,8 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
+import Spinner from "../elements/Spinner";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -188,6 +190,7 @@ export class RecaptchaAuthEntry extends React.Component {
     }
 
     _onCaptchaResponse = response => {
+        CountlyAnalytics.instance.track("onboarding_grecaptcha_submit");
         this.props.submitAuthDict({
             type: RecaptchaAuthEntry.LOGIN_TYPE,
             response: response,
@@ -296,6 +299,8 @@ export class TermsAuthEntry extends React.Component {
             toggledPolicies: initToggles,
             policies: pickedPolicies,
         };
+
+        CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
 
@@ -325,8 +330,12 @@ export class TermsAuthEntry extends React.Component {
             allChecked = allChecked && checked;
         }
 
-        if (allChecked) this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
-        else this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
+        if (allChecked) {
+            this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+            CountlyAnalytics.instance.track("onboarding_terms_complete");
+        } else {
+            this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
+        }
     };
 
     render() {
@@ -404,16 +413,20 @@ export class EmailIdentityAuthEntry extends React.Component {
         // the validation link, we won't know the email address, so if we don't have it,
         // assume that the link has been clicked and the server will realise when we poll.
         if (this.props.inputs.emailAddress === undefined) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
+        } else if (this.props.stageState?.emailSid) {
+            // we only have a session ID if the user has clicked the link in their email,
+            // so show a loading state instead of "an email has been sent to..." because
+            // that's confusing when you've already read that email.
+            return <Spinner />;
         } else {
             return (
-                <div>
-                    <p>{ _t("An email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
+                <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
+                    <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
+                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
                     ) }
                     </p>
-                    <p>{ _t("Please check your email to continue registration.") }</p>
+                    <p>{ _t("Open the link in the email to continue registration.") }</p>
                 </div>
             );
         }

src/components/views/auth/PassphraseField.tsx

@@ -40,11 +40,7 @@ interface IProps {
     onValidate(result: IValidationResult);
 }
 
-interface IState {
-    complexity: zxcvbn.ZXCVBNResult;
-}
-
-class PassphraseField extends PureComponent<IProps, IState> {
+class PassphraseField extends PureComponent<IProps> {
     static defaultProps = {
         label: _td("Password"),
         labelEnterPassword: _td("Enter password"),
@@ -52,14 +48,16 @@ class PassphraseField extends PureComponent<IProps, IState> {
         labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
     };
 
-    state = { complexity: null };
-
-    public readonly validate = withValidation<this>({
-        description: function() {
-            const complexity = this.state.complexity;
+    public readonly validate = withValidation<this, zxcvbn.ZXCVBNResult>({
+        description: function(complexity) {
             const score = complexity ? complexity.score : 0;
             return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
         },
+        deriveData: async ({ value }) => {
+            if (!value) return null;
+            const { scorePassword } = await import('../../../utils/PasswordScorer');
+            return scorePassword(value);
+        },
         rules: [
             {
                 key: "required",
@@ -68,28 +66,24 @@ class PassphraseField extends PureComponent<IProps, IState> {
             },
             {
                 key: "complexity",
-                test: async function({ value }) {
+                test: async function({ value }, complexity) {
                     if (!value) {
                         return false;
                     }
-                    const { scorePassword } = await import('../../../utils/PasswordScorer');
-                    const complexity = scorePassword(value);
-                    this.setState({ complexity });
                     const safe = complexity.score >= this.props.minScore;
                     const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
                     return allowUnsafe || safe;
                 },
-                valid: function() {
+                valid: function(complexity) {
                     // Unsafe passwords that are valid are only possible through a
                     // configuration flag. We'll print some helper text to signal
                     // to the user that their password is allowed, but unsafe.
-                    if (this.state.complexity.score >= this.props.minScore) {
+                    if (complexity.score >= this.props.minScore) {
                         return _t(this.props.labelStrongPassword);
                     }
                     return _t(this.props.labelAllowedButUnsafe);
                 },
-                invalid: function() {
-                    const complexity = this.state.complexity;
+                invalid: function(complexity) {
                     if (!complexity) {
                         return null;
                     }

src/components/views/auth/PasswordLogin.js

@@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import AccessibleButton from "../elements/AccessibleButton";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -150,7 +151,20 @@ export default class PasswordLogin extends React.Component {
         this.props.onUsernameChanged(ev.target.value);
     }
 
+    onUsernameFocus() {
+        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_MXID) {
+            CountlyAnalytics.instance.track("onboarding_login_mxid_focus");
+        } else {
+            CountlyAnalytics.instance.track("onboarding_login_email_focus");
+        }
+    }
+
     onUsernameBlur(ev) {
+        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_MXID) {
+            CountlyAnalytics.instance.track("onboarding_login_mxid_blur");
+        } else {
+            CountlyAnalytics.instance.track("onboarding_login_email_blur");
+        }
         this.props.onUsernameBlur(ev.target.value);
     }
 
@@ -161,6 +175,7 @@ export default class PasswordLogin extends React.Component {
             loginType: loginType,
             username: "", // Reset because email and username use the same state
         });
+        CountlyAnalytics.instance.track("onboarding_login_type_changed", { loginType });
     }
 
     onPhoneCountryChanged(country) {
@@ -176,8 +191,13 @@ export default class PasswordLogin extends React.Component {
         this.props.onPhoneNumberChanged(ev.target.value);
     }
 
+    onPhoneNumberFocus() {
+        CountlyAnalytics.instance.track("onboarding_login_phone_number_focus");
+    }
+
     onPhoneNumberBlur(ev) {
         this.props.onPhoneNumberBlur(ev.target.value);
+        CountlyAnalytics.instance.track("onboarding_login_phone_number_blur");
     }
 
     onPasswordChanged(ev) {
@@ -202,6 +222,7 @@ export default class PasswordLogin extends React.Component {
                     placeholder="joe@example.com"
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
+                    onFocus={this.onUsernameFocus}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}
@@ -216,6 +237,7 @@ export default class PasswordLogin extends React.Component {
                     label={_t("Username")}
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
+                    onFocus={this.onUsernameFocus}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}
@@ -240,6 +262,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.phoneNumber}
                     prefixComponent={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
+                    onFocus={this.onPhoneNumberFocus}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}
                     autoFocus={autoFocus}

src/components/views/auth/RegistrationForm.js

@@ -29,6 +29,7 @@ import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import PassphraseField from "./PassphraseField";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -50,7 +51,6 @@ export default class RegistrationForm extends React.Component {
         defaultUsername: PropTypes.string,
         defaultPassword: PropTypes.string,
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
-        onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
         canSubmit: PropTypes.bool,
@@ -77,6 +77,8 @@ export default class RegistrationForm extends React.Component {
             passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
         };
+
+        CountlyAnalytics.instance.track("onboarding_registration_begin");
     }
 
     onSubmit = async ev => {
@@ -86,6 +88,7 @@ export default class RegistrationForm extends React.Component {
 
         const allFieldsValid = await this.verifyFieldsBeforeSubmit();
         if (!allFieldsValid) {
+            CountlyAnalytics.instance.track("onboarding_registration_submit_failed");
             return;
         }
 
@@ -110,6 +113,8 @@ export default class RegistrationForm extends React.Component {
                 return;
             }
 
+            CountlyAnalytics.instance.track("onboarding_registration_submit_warn");
+
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
                 title: _t("Warning!"),
@@ -128,6 +133,11 @@ export default class RegistrationForm extends React.Component {
 
     _doSubmit(ev) {
         const email = this.state.email.trim();
+
+        CountlyAnalytics.instance.track("onboarding_registration_submit_ok", {
+            email: !!email,
+        });
+
         const promise = this.props.onRegisterClick({
             username: this.state.username.trim(),
             password: this.state.password.trim(),
@@ -239,6 +249,7 @@ export default class RegistrationForm extends React.Component {
 
     validateEmailRules = withValidation({
         description: () => _t("Use an email address to recover your account"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -315,6 +326,7 @@ export default class RegistrationForm extends React.Component {
 
     validatePhoneNumberRules = withValidation({
         description: () => _t("Other users can invite you to rooms using your contact details"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -345,6 +357,7 @@ export default class RegistrationForm extends React.Component {
 
     validateUsernameRules = withValidation({
         description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
+        hideDescriptionIfValid: true,
         rules: [
             {
                 key: "required",
@@ -422,6 +435,8 @@ export default class RegistrationForm extends React.Component {
             value={this.state.email}
             onChange={this.onEmailChange}
             onValidate={this.onEmailValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_email_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_email_blur")}
         />;
     }
 
@@ -433,6 +448,8 @@ export default class RegistrationForm extends React.Component {
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_password_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_password_blur")}
         />;
     }
 
@@ -443,10 +460,12 @@ export default class RegistrationForm extends React.Component {
             ref={field => this[FIELD_PASSWORD_CONFIRM] = field}
             type="password"
             autoComplete="new-password"
-            label={_t("Confirm")}
+            label={_t("Confirm password")}
             value={this.state.passwordConfirm}
             onChange={this.onPasswordConfirmChange}
             onValidate={this.onPasswordConfirmValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_passwordConfirm_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_passwordConfirm_blur")}
         />;
     }
 
@@ -487,37 +506,12 @@ export default class RegistrationForm extends React.Component {
             value={this.state.username}
             onChange={this.onUsernameChange}
             onValidate={this.onUsernameValidate}
+            onFocus={() => CountlyAnalytics.instance.track("onboarding_registration_username_focus")}
+            onBlur={() => CountlyAnalytics.instance.track("onboarding_registration_username_blur")}
         />;
     }
 
     render() {
-        let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        let editLink = null;
-        if (this.props.onEditServerDetailsClick) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                href="#" onClick={this.props.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );
@@ -553,10 +547,6 @@ export default class RegistrationForm extends React.Component {
 
         return (
             <div>
-                <h3>
-                    {yourMatrixAccountText}
-                    {editLink}
-                </h3>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
                         {this.renderUsername()}

src/components/views/auth/ServerConfig.js

@@ -26,6 +26,7 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import SdkConfig from "../../../SdkConfig";
 import { createClient } from 'matrix-js-sdk/src/matrix';
 import classNames from 'classnames';
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 /*
  * A pure UI component which displays the HS and IS to use.
@@ -70,6 +71,8 @@ export default class ServerConfig extends React.PureComponent {
             isUrl: props.serverConfig.isUrl,
             showIdentityServer: false,
         };
+
+        CountlyAnalytics.instance.track("onboarding_custom_server");
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event

src/components/views/auth/Welcome.js

@@ -15,15 +15,26 @@ limitations under the License.
 */
 
 import React from 'react';
+import classNames from "classnames";
+
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
 import {_td} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
 export default class Welcome extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        CountlyAnalytics.instance.track("onboarding_welcome");
+    }
+
     render() {
         const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
@@ -39,7 +50,9 @@ export default class Welcome extends React.PureComponent {
 
         return (
             <AuthPage>
-                <div className="mx_Welcome">
+                <div className={classNames("mx_Welcome", {
+                    mx_WelcomePage_registrationDisabled: !SettingsStore.getValue(UIFeature.Registration),
+                })}>
                     <EmbeddedPage
                         className="mx_WelcomePage"
                         url={pageUrl}

src/components/views/avatars/BaseAvatar.tsx

@@ -51,7 +51,8 @@ const calculateUrls = (url, urls) => {
         _urls = urls || [];
 
         if (url) {
-            _urls.unshift(url); // put in urls[0]
+            // copy urls and put url first
+            _urls = [url, ..._urls];
         }
     }
 

src/components/views/avatars/MemberAvatar.tsx

@@ -23,7 +23,7 @@ import {Action} from "../../../dispatcher/actions";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import BaseAvatar from "./BaseAvatar";
 
-interface IProps {
+interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;
     fallbackUserId?: string;
     width: number;

src/components/views/avatars/RoomAvatar.tsx

@@ -22,6 +22,7 @@ import ImageView from '../elements/ImageView';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
+import {ResizeMethod} from "../../../Avatar";
 
 interface IProps {
     // Room may be left unset here, but if it is,
@@ -32,8 +33,9 @@ interface IProps {
     oobData?: any;
     width?: number;
     height?: number;
-    resizeMethod?: string;
+    resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
+    onClick?(): void;
 }
 
 interface IState {
@@ -129,7 +131,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
+        const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
 
         const roomName = room ? room.name : oobData.name;
 
@@ -138,7 +140,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
                 name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls}
-                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
+                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
             />
         );
     }

src/components/views/avatars/WidgetAvatar.tsx

@@ -0,0 +1,58 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {ComponentProps, useContext} 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";
+
+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")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg")];
+    } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
+    } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
+    } else if (app.type.includes("clock")) {
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
+    }
+
+    return (
+        <BaseAvatar
+            {...props}
+            name={app.id}
+            className={classNames("mx_WidgetAvatar", className)}
+            // MSC2765
+            url={app.avatar_url ? getHttpUriForMxc(cli.getHomeserverUrl(), app.avatar_url, 20, 20, "crop") : undefined}
+            urls={iconUrls}
+            width={width}
+            height={height}
+        />
+    )
+};
+
+export default WidgetAvatar;

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -37,7 +37,7 @@ interface IOptionListProps {
 }
 
 interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
-    iconClassName: string;
+    iconClassName?: string;
 }
 
 interface ICheckboxProps extends React.ComponentProps<typeof MenuItemCheckbox> {
@@ -92,7 +92,7 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
 
 export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
     return <MenuItem {...props} label={label}>
-        <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
+        { iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} /> }
         <span className="mx_IconizedContextMenu_label">{label}</span>
     </MenuItem>;
 };

src/components/views/context_menus/MessageContextMenu.js

@@ -31,6 +31,7 @@ import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
 import {MenuItem} from "../../structures/ContextMenu";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 
 function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -72,7 +73,10 @@ export default class MessageContextMenu extends React.Component {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
 
-        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
+        // 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
+        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
+            && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
         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

src/components/views/context_menus/WidgetContextMenu.js

@@ -1,129 +0,0 @@
-/*
-Copyright 2019 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 PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
-import {MenuItem} from "../../structures/ContextMenu";
-
-export default class WidgetContextMenu extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func,
-
-        // Callback for when the revoke button is clicked. Required.
-        onRevokeClicked: PropTypes.func.isRequired,
-
-        // Callback for when the snapshot button is clicked. Button not shown
-        // without a callback.
-        onSnapshotClicked: PropTypes.func,
-
-        // Callback for when the reload button is clicked. Button not shown
-        // without a callback.
-        onReloadClicked: PropTypes.func,
-
-        // Callback for when the edit button is clicked. Button not shown
-        // without a callback.
-        onEditClicked: PropTypes.func,
-
-        // Callback for when the delete button is clicked. Button not shown
-        // without a callback.
-        onDeleteClicked: PropTypes.func,
-    };
-
-    proxyClick(fn) {
-        fn();
-        if (this.props.onFinished) this.props.onFinished();
-    }
-
-    // XXX: It's annoying that our context menus require us to hit onFinished() to close :(
-
-    onEditClicked = () => {
-        this.proxyClick(this.props.onEditClicked);
-    };
-
-    onReloadClicked = () => {
-        this.proxyClick(this.props.onReloadClicked);
-    };
-
-    onSnapshotClicked = () => {
-        this.proxyClick(this.props.onSnapshotClicked);
-    };
-
-    onDeleteClicked = () => {
-        this.proxyClick(this.props.onDeleteClicked);
-    };
-
-    onRevokeClicked = () => {
-        this.proxyClick(this.props.onRevokeClicked);
-    };
-
-    render() {
-        const options = [];
-
-        if (this.props.onEditClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onEditClicked} key='edit'>
-                    {_t("Edit")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onReloadClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onReloadClicked} key='reload'>
-                    {_t("Reload")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onSnapshotClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onSnapshotClicked} key='snap'>
-                    {_t("Take picture")}
-                </MenuItem>,
-            );
-        }
-
-        if (this.props.onDeleteClicked) {
-            options.push(
-                <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onDeleteClicked} key='delete'>
-                    {_t("Remove for everyone")}
-                </MenuItem>,
-            );
-        }
-
-        // Push this last so it appears last. It's always present.
-        options.push(
-            <MenuItem className='mx_WidgetContextMenu_option' onClick={this.onRevokeClicked} key='revoke'>
-                {_t("Remove for me")}
-            </MenuItem>,
-        );
-
-        // Put separators between the options
-        if (options.length > 1) {
-            const length = options.length;
-            for (let i = 0; i < length - 1; i++) {
-                const sep = <hr key={i} className="mx_WidgetContextMenu_separator" />;
-
-                // Insert backwards so the insertions don't affect our math on where to place them.
-                // We also use our cached length to avoid worrying about options.length changing
-                options.splice(length - 1 - i, 0, sep);
-            }
-        }
-
-        return <div className="mx_WidgetContextMenu">{options}</div>;
-    }
-}

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -0,0 +1,177 @@
+/*
+Copyright 2020 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} from "react";
+import {MatrixCapabilities} from "matrix-widget-api";
+
+import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
+import {ChevronFace} from "../../structures/ContextMenu";
+import {_t} from "../../../languageHandler";
+import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
+import RoomContext from "../../../contexts/RoomContext";
+import dis from "../../../dispatcher/dispatcher";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
+import Modal from "../../../Modal";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import {WidgetType} from "../../../widgets/WidgetType";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
+    app: IApp;
+    userWidget?: boolean;
+    showUnpin?: boolean;
+    // override delete handler
+    onDeleteClick?(): void;
+}
+
+const WidgetContextMenu: React.FC<IProps> = ({
+    onFinished,
+    app,
+    userWidget,
+    onDeleteClick,
+    showUnpin,
+    ...props
+}) => {
+    const cli = useContext(MatrixClientContext);
+    const {room, roomId} = useContext(RoomContext);
+
+    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
+    const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
+
+    let unpinButton;
+    if (showUnpin) {
+        const onUnpinClick = () => {
+            WidgetStore.instance.unpinWidget(app.id);
+            onFinished();
+        };
+
+        unpinButton = <IconizedContextMenuOption onClick={onUnpinClick} label={_t("Unpin")} />;
+    }
+
+    let editButton;
+    if (canModify && WidgetUtils.isManagedByManager(app)) {
+        const onEditClick = () => {
+            WidgetUtils.editWidget(room, app);
+            onFinished();
+        };
+
+        editButton = <IconizedContextMenuOption onClick={onEditClick} label={_t("Edit")} />;
+    }
+
+    let snapshotButton;
+    if (widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
+        const onSnapshotClick = () => {
+            widgetMessaging?.takeScreenshot().then(data => {
+                dis.dispatch({
+                    action: 'picture_snapshot',
+                    file: data.screenshot,
+                });
+            }).catch(err => {
+                console.error("Failed to take screenshot: ", err);
+            });
+            onFinished();
+        };
+
+        snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
+    }
+
+    let deleteButton;
+    if (onDeleteClick || canModify) {
+        const onDeleteClickDefault = () => {
+            // Show delete confirmation dialog
+            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                title: _t("Delete Widget"),
+                description: _t(
+                    "Deleting a widget removes it for all users in this room." +
+                    " Are you sure you want to delete this widget?"),
+                button: _t("Delete widget"),
+                onFinished: (confirmed) => {
+                    if (!confirmed) return;
+                    WidgetUtils.setRoomWidget(roomId, app.id);
+                },
+            });
+            onFinished();
+        };
+
+        deleteButton = <IconizedContextMenuOption
+            onClick={onDeleteClick || onDeleteClickDefault}
+            label={userWidget ? _t("Remove") : _t("Remove for everyone")}
+        />;
+    }
+
+    let isAllowedWidget = SettingsStore.getValue("allowedWidgets", roomId)[app.eventId];
+    if (isAllowedWidget === undefined) {
+        isAllowedWidget = app.creatorUserId === cli.getUserId();
+    }
+
+    const isLocalWidget = WidgetType.JITSI.matches(app.type);
+    let revokeButton;
+    if (!userWidget && !isLocalWidget && isAllowedWidget) {
+        const onRevokeClick = () => {
+            console.info("Revoking permission for widget to load: " + app.eventId);
+            const current = SettingsStore.getValue("allowedWidgets", roomId);
+            current[app.eventId] = false;
+            SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).catch(err => {
+                console.error(err);
+                // We don't really need to do anything about this - the user will just hit the button again.
+            });
+            onFinished();
+        };
+
+        revokeButton = <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Revoke permissions")} />;
+    }
+
+    const pinnedWidgets = WidgetStore.instance.getPinnedApps(roomId);
+    const widgetIndex = pinnedWidgets.findIndex(widget => widget.id === app.id);
+
+    let moveLeftButton;
+    if (showUnpin && widgetIndex > 0) {
+        const onClick = () => {
+            WidgetStore.instance.movePinnedWidget(app.id, -1);
+            onFinished();
+        };
+
+        moveLeftButton = <IconizedContextMenuOption onClick={onClick} label={_t("Move left")} />;
+    }
+
+    let moveRightButton;
+    if (showUnpin && widgetIndex < pinnedWidgets.length - 1) {
+        const onClick = () => {
+            WidgetStore.instance.movePinnedWidget(app.id, 1);
+            onFinished();
+        };
+
+        moveRightButton = <IconizedContextMenuOption onClick={onClick} label={_t("Move right")} />;
+    }
+
+    return <IconizedContextMenu {...props} chevronFace={ChevronFace.None} onFinished={onFinished}>
+        <IconizedContextMenuOptionList>
+            { editButton }
+            { revokeButton }
+            { deleteButton }
+            { snapshotButton }
+            { moveLeftButton }
+            { moveRightButton }
+            { unpinButton }
+        </IconizedContextMenuOptionList>
+    </IconizedContextMenu>;
+};
+
+export default WidgetContextMenu;
+

src/components/views/dialogs/BugReportDialog.js

@@ -34,7 +34,7 @@ export default class BugReportDialog extends React.Component {
             busy: false,
             err: null,
             issueUrl: "",
-            text: "",
+            text: props.initialText || "",
             progress: null,
             downloadBusy: false,
             downloadProgress: null,
@@ -255,4 +255,5 @@ export default class BugReportDialog extends React.Component {
 
 BugReportDialog.propTypes = {
     onFinished: PropTypes.func.isRequired,
+    initialText: PropTypes.string,
 };

src/components/views/dialogs/CreateRoomDialog.js

@@ -45,7 +45,11 @@ export default class CreateRoomDialog extends React.Component {
             detailsOpen: false,
             noFederate: config.default_federate === false,
             nameIsValid: false,
+            canChangeEncryption: true,
         };
+
+        MatrixClientPeg.get().doesServerForceEncryptionForPreset("private")
+            .then(isForced => this.setState({canChangeEncryption: !isForced}));
     }
 
     _roomCreateOptions() {
@@ -68,7 +72,13 @@ export default class CreateRoomDialog extends React.Component {
         }
 
         if (!this.state.isPublic) {
-            opts.encryption = this.state.isEncrypted;
+            if (this.state.canChangeEncryption) {
+                opts.encryption = this.state.isEncrypted;
+            } else {
+                // the server should automatically do this for us, but for safety
+                // we'll demand it too.
+                opts.encryption = true;
+            }
         }
 
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
@@ -208,7 +218,11 @@ export default class CreateRoomDialog extends React.Component {
         if (!this.state.isPublic) {
             let microcopy;
             if (privateShouldBeEncrypted()) {
-                microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
+                if (this.state.canChangeEncryption) {
+                    microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
+                } else {
+                    microcopy = _t("Your server requires encryption to be enabled in private rooms.");
+                }
             } else {
                 microcopy = _t("Your server admin has disabled end-to-end encryption by default " +
                     "in private rooms & Direct Messages.");
@@ -219,6 +233,7 @@ export default class CreateRoomDialog extends React.Component {
                     onChange={this.onEncryptedChange}
                     value={this.state.isEncrypted}
                     className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
+                    disabled={!this.state.canChangeEncryption}
                 />
                 <p>{ microcopy }</p>
             </React.Fragment>;

src/components/views/dialogs/FeedbackDialog.js

@@ -0,0 +1,138 @@
+/*
+Copyright 2018 New Vector Ltd
+
+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 QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import CountlyAnalytics from "../../../CountlyAnalytics";
+import SdkConfig from "../../../SdkConfig";
+import Modal from "../../../Modal";
+import BugReportDialog from "./BugReportDialog";
+import InfoDialog from "./InfoDialog";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+
+const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
+    "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
+const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
+
+
+export default (props) => {
+    const [rating, setRating] = useState("");
+    const [comment, setComment] = useState("");
+
+    const onDebugLogsLinkClick = () => {
+        props.onFinished();
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
+    };
+
+    const hasFeedback = CountlyAnalytics.instance.canEnable();
+    const onFinished = (sendFeedback) => {
+        if (hasFeedback && sendFeedback) {
+            CountlyAnalytics.instance.reportFeedback(parseInt(rating, 10), comment);
+            Modal.createTrackedDialog('Feedback sent', '', InfoDialog, {
+                title: _t('Feedback sent'),
+                description: _t('Thank you!'),
+            });
+        }
+        props.onFinished();
+    };
+
+    const brand = SdkConfig.get().brand;
+
+    let countlyFeedbackSection;
+    if (hasFeedback) {
+        countlyFeedbackSection = <React.Fragment>
+            <hr />
+            <div className="mx_FeedbackDialog_section mx_FeedbackDialog_rateApp">
+                <h3>{_t("Rate %(brand)s", { brand })}</h3>
+
+                <p>{_t("Tell us below how you feel about %(brand)s so far.", { brand })}</p>
+                <p>{_t("Please go into as much detail as you like, so we can track down the problem.")}</p>
+
+                <StyledRadioGroup
+                    name="feedbackRating"
+                    value={rating}
+                    onChange={setRating}
+                    definitions={[
+                        { value: "1", label: "😠" },
+                        { value: "2", label: "😞" },
+                        { value: "3", label: "😑" },
+                        { value: "4", label: "😄" },
+                        { value: "5", label: "😍" },
+                    ]}
+                />
+
+                <Field
+                    id="feedbackComment"
+                    label={_t("Add comment")}
+                    placeholder={_t("Comment")}
+                    type="text"
+                    autoComplete="off"
+                    value={comment}
+                    element="textarea"
+                    onChange={(ev) => {
+                        setComment(ev.target.value);
+                    }}
+                />
+            </div>
+        </React.Fragment>;
+    }
+
+    let subheading;
+    if (hasFeedback) {
+        subheading = (
+            <h2>{_t("There are two ways you can provide feedback and help us improve %(brand)s.", { brand })}</h2>
+        );
+    }
+
+    return (<QuestionDialog
+        className="mx_FeedbackDialog"
+        hasCancelButton={!!hasFeedback}
+        title={_t("Feedback")}
+        description={<React.Fragment>
+            { subheading }
+
+            <div className="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug">
+                <h3>{_t("Report a bug")}</h3>
+                <p>{
+                    _t("Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. " +
+                        "No match? <newIssueLink>Start a new one</newIssueLink>.", {}, {
+                        existingIssuesLink: (sub) => {
+                            return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+                        },
+                        newIssueLink: (sub) => {
+                            return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+                        },
+                    })
+                }</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>
+            </div>
+            { countlyFeedbackSection }
+        </React.Fragment>}
+        button={hasFeedback ? _t("Send feedback") : _t("Go back")}
+        buttonDisabled={hasFeedback && rating === ""}
+        onFinished={onFinished}
+    />);
+};

src/components/views/dialogs/InviteDialog.js

@@ -31,13 +31,17 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers, findDMForUser, privateShouldBeEncrypted} from "../../../createRoom";
 import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
 import {DefaultTagID} from "../../../stores/room-list/models";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
+import CountlyAnalytics from "../../../CountlyAnalytics";
+import {Room} from "matrix-js-sdk/src/models/room";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -277,11 +281,17 @@ class DMRoomTile extends React.PureComponent {
             </span>
         );
 
+        const caption = this.props.member.isEmail
+            ? _t("Invite by email")
+            : this._highlightName(this.props.member.userId);
+
         return (
             <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
                 {stackedAvatar}
-                <span className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
-                <span className='mx_InviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
+                <span className="mx_InviteDialog_roomTile_nameStack">
+                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
+                </span>
                 {timestamp}
             </div>
         );
@@ -299,10 +309,14 @@ export default class InviteDialog extends React.PureComponent {
 
         // The room ID this dialog is for. Only required for KIND_INVITE.
         roomId: PropTypes.string,
+
+        // Initial value to populate the filter with
+        initialText: PropTypes.string,
     };
 
     static defaultProps = {
         kind: KIND_DM,
+        initialText: "",
     };
 
     _debounceTimer: number = null;
@@ -323,11 +337,13 @@ export default class InviteDialog extends React.PureComponent {
             room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
             // add banned users, so we don't try to invite them
             room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
+
+            CountlyAnalytics.instance.trackBeginInvite(props.roomId);
         }
 
         this.state = {
             targets: [], // array of Member objects (see interface above)
-            filterText: "",
+            filterText: this.props.initialText,
             recents: InviteDialog.buildRecents(alreadyInvited),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
             suggestions: this._buildSuggestions(alreadyInvited),
@@ -345,6 +361,12 @@ export default class InviteDialog extends React.PureComponent {
         this._editorRef = createRef();
     }
 
+    componentDidMount() {
+        if (this.props.initialText) {
+            this._updateSuggestions(this.props.initialText);
+        }
+    }
+
     static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
@@ -549,7 +571,7 @@ export default class InviteDialog extends React.PureComponent {
         if (this.state.filterText.startsWith('@')) {
             // Assume mxid
             newMember = new DirectoryMember({user_id: this.state.filterText, display_name: null, avatar_url: null});
-        } else {
+        } else if (SettingsStore.getValue(UIFeature.IdentityServer)) {
             // Assume email
             newMember = new ThreepidMember(this.state.filterText);
         }
@@ -564,7 +586,12 @@ export default class InviteDialog extends React.PureComponent {
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
-        const existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+        let existingRoom: Room;
+        if (targetIds.length === 1) {
+            existingRoom = findDMForUser(MatrixClientPeg.get(), targetIds[0]);
+        } else {
+            existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+        }
         if (existingRoom) {
             dis.dispatch({
                 action: 'view_room',
@@ -625,6 +652,7 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _inviteUsers = () => {
+        const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
         this._convertFilter();
         const targets = this._convertFilter();
@@ -641,6 +669,7 @@ export default class InviteDialog extends React.PureComponent {
         }
 
         inviteMultipleToRoom(this.props.roomId, targetIds).then(result => {
+            CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
                 this.props.onFinished();
             }
@@ -656,12 +685,130 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _onKeyDown = (e) => {
-        // when the field is empty and the user hits backspace remove the right-most target
-        if (!e.target.value && !this.state.busy && this.state.targets.length > 0 && e.key === Key.BACKSPACE &&
-            !e.ctrlKey && !e.shiftKey && !e.metaKey
-        ) {
+        if (this.state.busy) return;
+        const value = e.target.value.trim();
+        const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
+        if (!value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
+            // when the field is empty and the user hits backspace remove the right-most target
             e.preventDefault();
             this._removeMember(this.state.targets[this.state.targets.length - 1]);
+        } else if (value && e.key === Key.ENTER && !hasModifiers) {
+            // when the user hits enter with something in their field try to convert it
+            e.preventDefault();
+            this._convertFilter();
+        } else if (value && e.key === Key.SPACE && !hasModifiers && value.includes("@") && !value.includes(" ")) {
+            // when the user hits space and their input looks like an e-mail/MXID then try to convert it
+            e.preventDefault();
+            this._convertFilter();
+        }
+    };
+
+    _updateSuggestions = async (term) => {
+        MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
+            if (term !== this.state.filterText) {
+                // Discard the results - we were probably too slow on the server-side to make
+                // these results useful. This is a race we want to avoid because we could overwrite
+                // more accurate results.
+                return;
+            }
+
+            if (!r.results) r.results = [];
+
+            // While we're here, try and autocomplete a search result for the mxid itself
+            // if there's no matches (and the input looks like a mxid).
+            if (term[0] === '@' && term.indexOf(':') > 1) {
+                try {
+                    const profile = await MatrixClientPeg.get().getProfileInfo(term);
+                    if (profile) {
+                        // If we have a profile, we have enough information to assume that
+                        // the mxid can be invited - add it to the list. We stick it at the
+                        // top so it is most obviously presented to the user.
+                        r.results.splice(0, 0, {
+                            user_id: term,
+                            display_name: profile['displayname'],
+                            avatar_url: profile['avatar_url'],
+                        });
+                    }
+                } catch (e) {
+                    console.warn("Non-fatal error trying to make an invite for a user ID");
+                    console.warn(e);
+
+                    // Add a result anyways, just without a profile. We stick it at the
+                    // top so it is most obviously presented to the user.
+                    r.results.splice(0, 0, {
+                        user_id: term,
+                        display_name: term,
+                        avatar_url: null,
+                    });
+                }
+            }
+
+            this.setState({
+                serverResultsMixin: r.results.map(u => ({
+                    userId: u.user_id,
+                    user: new DirectoryMember(u),
+                })),
+            });
+        }).catch(e => {
+            console.error("Error searching user directory:");
+            console.error(e);
+            this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+        });
+
+        // Whenever we search the directory, also try to search the identity server. It's
+        // all debounced the same anyways.
+        if (!this.state.canUseIdentityServer) {
+            // The user doesn't have an identity server set - warn them of that.
+            this.setState({tryingIdentityServer: true});
+            return;
+        }
+        if (term.indexOf('@') > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
+            // Start off by suggesting the plain email while we try and resolve it
+            // to a real account.
+            this.setState({
+                // per above: the userId is a lie here - it's just a regular identifier
+                threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
+            });
+            try {
+                const authClient = new IdentityAuthClient();
+                const token = await authClient.getAccessToken();
+                if (term !== this.state.filterText) return; // abandon hope
+
+                const lookup = await MatrixClientPeg.get().lookupThreePid(
+                    'email',
+                    term,
+                    undefined, // callback
+                    token,
+                );
+                if (term !== this.state.filterText) return; // abandon hope
+
+                if (!lookup || !lookup.mxid) {
+                    // We weren't able to find anyone - we're already suggesting the plain email
+                    // as an alternative, so do nothing.
+                    return;
+                }
+
+                // We append the user suggestion to give the user an option to click
+                // the email anyways, and so we don't cause things to jump around. In
+                // theory, the user would see the user pop up and think "ah yes, that
+                // person!"
+                const profile = await MatrixClientPeg.get().getProfileInfo(lookup.mxid);
+                if (term !== this.state.filterText || !profile) return; // abandon hope
+                this.setState({
+                    threepidResultsMixin: [...this.state.threepidResultsMixin, {
+                        user: new DirectoryMember({
+                            user_id: lookup.mxid,
+                            display_name: profile.displayname,
+                            avatar_url: profile.avatar_url,
+                        }),
+                        userId: lookup.mxid,
+                    }],
+                });
+            } catch (e) {
+                console.error("Error searching identity server:");
+                console.error(e);
+                this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
+            }
         }
     };
 
@@ -675,113 +822,8 @@ export default class InviteDialog extends React.PureComponent {
         if (this._debounceTimer) {
             clearTimeout(this._debounceTimer);
         }
-        this._debounceTimer = setTimeout(async () => {
-            MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
-                if (term !== this.state.filterText) {
-                    // Discard the results - we were probably too slow on the server-side to make
-                    // these results useful. This is a race we want to avoid because we could overwrite
-                    // more accurate results.
-                    return;
-                }
-
-                if (!r.results) r.results = [];
-
-                // While we're here, try and autocomplete a search result for the mxid itself
-                // if there's no matches (and the input looks like a mxid).
-                if (term[0] === '@' && term.indexOf(':') > 1) {
-                    try {
-                        const profile = await MatrixClientPeg.get().getProfileInfo(term);
-                        if (profile) {
-                            // If we have a profile, we have enough information to assume that
-                            // the mxid can be invited - add it to the list. We stick it at the
-                            // top so it is most obviously presented to the user.
-                            r.results.splice(0, 0, {
-                                user_id: term,
-                                display_name: profile['displayname'],
-                                avatar_url: profile['avatar_url'],
-                            });
-                        }
-                    } catch (e) {
-                        console.warn("Non-fatal error trying to make an invite for a user ID");
-                        console.warn(e);
-
-                        // Add a result anyways, just without a profile. We stick it at the
-                        // top so it is most obviously presented to the user.
-                        r.results.splice(0, 0, {
-                            user_id: term,
-                            display_name: term,
-                            avatar_url: null,
-                        });
-                    }
-                }
-
-                this.setState({
-                    serverResultsMixin: r.results.map(u => ({
-                        userId: u.user_id,
-                        user: new DirectoryMember(u),
-                    })),
-                });
-            }).catch(e => {
-                console.error("Error searching user directory:");
-                console.error(e);
-                this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
-            });
-
-            // Whenever we search the directory, also try to search the identity server. It's
-            // all debounced the same anyways.
-            if (!this.state.canUseIdentityServer) {
-                // The user doesn't have an identity server set - warn them of that.
-                this.setState({tryingIdentityServer: true});
-                return;
-            }
-            if (term.indexOf('@') > 0 && Email.looksValid(term)) {
-                // Start off by suggesting the plain email while we try and resolve it
-                // to a real account.
-                this.setState({
-                    // per above: the userId is a lie here - it's just a regular identifier
-                    threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
-                });
-                try {
-                    const authClient = new IdentityAuthClient();
-                    const token = await authClient.getAccessToken();
-                    if (term !== this.state.filterText) return; // abandon hope
-
-                    const lookup = await MatrixClientPeg.get().lookupThreePid(
-                        'email',
-                        term,
-                        undefined, // callback
-                        token,
-                    );
-                    if (term !== this.state.filterText) return; // abandon hope
-
-                    if (!lookup || !lookup.mxid) {
-                        // We weren't able to find anyone - we're already suggesting the plain email
-                        // as an alternative, so do nothing.
-                        return;
-                    }
-
-                    // We append the user suggestion to give the user an option to click
-                    // the email anyways, and so we don't cause things to jump around. In
-                    // theory, the user would see the user pop up and think "ah yes, that
-                    // person!"
-                    const profile = await MatrixClientPeg.get().getProfileInfo(lookup.mxid);
-                    if (term !== this.state.filterText || !profile) return; // abandon hope
-                    this.setState({
-                        threepidResultsMixin: [...this.state.threepidResultsMixin, {
-                            user: new DirectoryMember({
-                                user_id: lookup.mxid,
-                                display_name: profile.displayname,
-                                avatar_url: profile.avatar_url,
-                            }),
-                            userId: lookup.mxid,
-                        }],
-                    });
-                } catch (e) {
-                    console.error("Error searching identity server:");
-                    console.error(e);
-                    this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
-                }
-            }
+        this._debounceTimer = setTimeout(() => {
+            this._updateSuggestions(term);
         }, 150); // 150ms debounce (human reaction time + some)
     };
 
@@ -804,6 +846,10 @@ export default class InviteDialog extends React.PureComponent {
             filterText = ""; // clear the filter when the user accepts a suggestion
         }
         this.setState({targets, filterText});
+
+        if (this._editorRef && this._editorRef.current) {
+            this._editorRef.current.focus();
+        }
     };
 
     _removeMember = (member: Member) => {
@@ -813,6 +859,10 @@ export default class InviteDialog extends React.PureComponent {
             targets.splice(idx, 1);
             this.setState({targets});
         }
+
+        if (this._editorRef && this._editorRef.current) {
+            this._editorRef.current.focus();
+        }
     };
 
     _onPaste = async (e) => {
@@ -822,7 +872,7 @@ export default class InviteDialog extends React.PureComponent {
             return;
         }
 
-        // Prevent the text being pasted into the textarea
+        // Prevent the text being pasted into the input
         e.preventDefault();
 
         // Process it as a list of addresses to add instead
@@ -1017,8 +1067,8 @@ export default class InviteDialog extends React.PureComponent {
             <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
         ));
         const input = (
-            <textarea
-                rows={1}
+            <input
+                type="text"
                 onKeyDown={this._onKeyDown}
                 onChange={this._updateFilter}
                 value={this.state.filterText}
@@ -1026,6 +1076,7 @@ export default class InviteDialog extends React.PureComponent {
                 onPaste={this._onPaste}
                 autoFocus={true}
                 disabled={this.state.busy}
+                autoComplete="off"
             />
         );
         return (
@@ -1037,7 +1088,9 @@ export default class InviteDialog extends React.PureComponent {
     }
 
     _renderIdentityServerWarning() {
-        if (!this.state.tryingIdentityServer || this.state.canUseIdentityServer) {
+        if (!this.state.tryingIdentityServer || this.state.canUseIdentityServer ||
+            !SettingsStore.getValue(UIFeature.IdentityServer)
+        ) {
             return null;
         }
 
@@ -1086,22 +1139,38 @@ export default class InviteDialog extends React.PureComponent {
         let buttonText;
         let goButtonFn;
 
+        const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
+
         const userId = MatrixClientPeg.get().getUserId();
         if (this.props.kind === KIND_DM) {
             title = _t("Direct Messages");
-            helpText = _t(
-                "Start a conversation with someone using their name, username (like <userId/>) or email address.",
-                {},
-                {userId: () => {
-                    return <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>;
-                }},
-            );
+
+            if (identityServersEnabled) {
+                helpText = _t(
+                    "Start a conversation with someone using their name, email address or username (like <userId/>).",
+                    {},
+                    {userId: () => {
+                        return (
+                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
+                        );
+                    }},
+                );
+            } else {
+                helpText = _t(
+                    "Start a conversation with someone using their name or username (like <userId/>).",
+                    {},
+                    {userId: () => {
+                        return (
+                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
+                        );
+                    }},
+                );
+            }
+
             if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
                 const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
-                helpText = _t(
-                    "Start a conversation with someone using their name, username (like <userId/>) or email address. " +
-                    "This won't invite them to %(communityName)s. To invite someone to %(communityName)s, click " +
-                    "<a>here</a>.",
+                const inviteText = _t("This won't invite them to %(communityName)s. " +
+                    "To invite someone to %(communityName)s, click <a>here</a>",
                     {communityName}, {
                         userId: () => {
                             return (
@@ -1122,21 +1191,40 @@ export default class InviteDialog extends React.PureComponent {
                         },
                     },
                 );
+                helpText = <React.Fragment>
+                    { helpText } {inviteText}
+                </React.Fragment>;
             }
             buttonText = _t("Go");
             goButtonFn = this._startDm;
         } else { // KIND_INVITE
             title = _t("Invite to this room");
-            helpText = _t(
-                "Invite someone using their name, username (like <userId/>), email address 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) {
+                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>,
+                    },
+                );
+            } 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>,
+                    },
+                );
+            }
+
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
         }

src/components/views/dialogs/LogoutDialog.js

@@ -20,7 +20,8 @@ import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
 
 export default class LogoutDialog extends React.Component {
     defaultProps = {
@@ -73,7 +74,7 @@ export default class LogoutDialog extends React.Component {
 
     _onExportE2eKeysClicked() {
         Modal.createTrackedDialogAsync('Export E2E Keys', '',
-            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
+            import('../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
             {
                 matrixClient: MatrixClientPeg.get(),
             },
@@ -93,14 +94,13 @@ export default class LogoutDialog extends React.Component {
             // A key backup exists for this account, but the creating device is not
             // verified, so restore the backup which will give us the keys from it and
             // allow us to trust it (ie. upload keys to it)
-            const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
             Modal.createTrackedDialog(
                 'Restore Backup', '', RestoreKeyBackupDialog, null, null,
                 /* priority = */ false, /* static = */ true,
             );
         } else {
             Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
-                import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
+                import("../../../async-components/views/dialogs/security/CreateKeyBackupDialog"),
                 null, null, /* priority = */ false, /* static = */ true,
             );
         }

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -0,0 +1,199 @@
+/*
+Copyright 2020 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 * as React from 'react';
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
+import {
+    ClientWidgetApi,
+    IModalWidgetCloseRequest,
+    IModalWidgetOpenRequestData,
+    IModalWidgetReturnData,
+    ISetModalButtonEnabledActionRequest,
+    IWidgetApiAcknowledgeResponseData,
+    IWidgetApiErrorResponseData,
+    BuiltInModalButtonID,
+    ModalButtonID,
+    ModalButtonKind,
+    Widget,
+    WidgetApiFromWidgetAction,
+} from "matrix-widget-api";
+import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import RoomViewStore from "../../../stores/RoomViewStore";
+import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import { arrayFastClone } from "../../../utils/arrays";
+
+interface IProps {
+    widgetDefinition: IModalWidgetOpenRequestData;
+    sourceWidgetId: string;
+    onFinished(success: boolean, data?: IModalWidgetReturnData): void;
+}
+
+interface IState {
+    messaging?: ClientWidgetApi;
+    disabledButtonIds: ModalButtonID[];
+}
+
+const MAX_BUTTONS = 3;
+
+export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
+    private readonly widget: Widget;
+    private readonly possibleButtons: ModalButtonID[];
+    private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
+
+    state: IState = {
+        disabledButtonIds: [],
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.widget = new Widget({
+            ...this.props.widgetDefinition,
+            creatorUserId: MatrixClientPeg.get().getUserId(),
+            id: `modal_${this.props.sourceWidgetId}`,
+        });
+        this.possibleButtons = (this.props.widgetDefinition.buttons || []).map(b => b.id);
+    }
+
+    public componentDidMount() {
+        const driver = new StopGapWidgetDriver( []);
+        const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
+        this.setState({messaging});
+    }
+
+    public componentWillUnmount() {
+        this.state.messaging.off("ready", this.onReady);
+        this.state.messaging.off(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
+        this.state.messaging.stop();
+    }
+
+    private onReady = () => {
+        this.state.messaging.sendWidgetConfig(this.props.widgetDefinition);
+    };
+
+    private onLoad = () => {
+        this.state.messaging.once("ready", this.onReady);
+        this.state.messaging.on(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
+        this.state.messaging.on(`action:${WidgetApiFromWidgetAction.SetModalButtonEnabled}`, this.onButtonEnableToggle);
+    };
+
+    private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
+        this.props.onFinished(true, ev.detail.data);
+    }
+
+    private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
+        ev.preventDefault();
+        const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
+        if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
+            return this.state.messaging.transport.reply(ev.detail, {
+                error: {message: "Invalid button"},
+            } as IWidgetApiErrorResponseData);
+        }
+
+        let buttonIds: ModalButtonID[];
+        if (ev.detail.data.enabled) {
+            buttonIds = arrayFastClone(this.state.disabledButtonIds).filter(i => i !== ev.detail.data.button);
+        } else {
+            // use a set to swap the operation to avoid memory leaky arrays.
+            const tempSet = new Set(this.state.disabledButtonIds);
+            tempSet.add(ev.detail.data.button);
+            buttonIds = Array.from(tempSet);
+        }
+        this.setState({disabledButtonIds: buttonIds});
+        this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
+    };
+
+    public render() {
+        const templated = this.widget.getCompleteUrl({
+            currentRoomId: RoomViewStore.getRoomId(),
+            currentUserId: MatrixClientPeg.get().getUserId(),
+            userDisplayName: OwnProfileStore.instance.displayName,
+            userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
+        });
+
+        const parsed = new URL(templated);
+
+        // Add in some legacy support sprinkles (for non-popout widgets)
+        // TODO: Replace these with proper widget params
+        // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
+        parsed.searchParams.set('widgetId', this.widget.id);
+        parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
+
+        // Replace the encoded dollar signs back to dollar signs. They have no special meaning
+        // in HTTP, but URL parsers encode them anyways.
+        const widgetUrl = parsed.toString().replace(/%24/g, '$');
+
+        let buttons;
+        if (this.props.widgetDefinition.buttons) {
+            // show first button rightmost for a more natural specification
+            buttons = this.props.widgetDefinition.buttons.slice(0, MAX_BUTTONS).reverse().map(def => {
+                let kind = "secondary";
+                switch (def.kind) {
+                    case ModalButtonKind.Primary:
+                        kind = "primary";
+                        break;
+                    case ModalButtonKind.Secondary:
+                        kind = "primary_outline";
+                        break
+                    case ModalButtonKind.Danger:
+                        kind = "danger";
+                        break;
+                }
+
+                const onClick = () => {
+                    this.state.messaging.notifyModalWidgetButtonClicked(def.id);
+                };
+
+                return <AccessibleButton key={def.id} kind={kind} onClick={onClick}>
+                    { def.label }
+                </AccessibleButton>;
+            });
+        }
+
+        return <BaseDialog
+            title={this.props.widgetDefinition.name || _t("Modal Widget")}
+            className="mx_ModalWidgetDialog"
+            contentId="mx_Dialog_content"
+            onFinished={this.props.onFinished}
+        >
+            <div className="mx_ModalWidgetDialog_warning">
+                <img
+                    src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                    height="16"
+                    width="16"
+                    alt=""
+                />
+                {_t("Data on this screen is shared with %(widgetDomain)s", {
+                    widgetDomain: parsed.hostname,
+                })}
+            </div>
+            <div>
+                <iframe
+                    ref={this.appFrame}
+                    sandbox="allow-forms allow-scripts allow-same-origin"
+                    src={widgetUrl}
+                    onLoad={this.onLoad}
+                />
+            </div>
+            <div className="mx_ModalWidgetDialog_buttons">
+                { buttons }
+            </div>
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/QuestionDialog.js

@@ -17,6 +17,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from "classnames";
+
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
@@ -26,12 +28,14 @@ export default class QuestionDialog extends React.Component {
         description: PropTypes.node,
         extraButtons: PropTypes.node,
         button: PropTypes.string,
+        buttonDisabled: PropTypes.bool,
         danger: PropTypes.bool,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
         headerImage: PropTypes.string,
         quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
         fixedWidth: PropTypes.bool,
+        className: PropTypes.string,
     };
 
     static defaultProps = {
@@ -61,7 +65,7 @@ export default class QuestionDialog extends React.Component {
         }
         return (
             <BaseDialog
-                className="mx_QuestionDialog"
+                className={classNames("mx_QuestionDialog", this.props.className)}
                 onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
@@ -74,6 +78,7 @@ export default class QuestionDialog extends React.Component {
                 </div>
                 <DialogButtons primaryButton={this.props.button || _t('OK')}
                     primaryButtonClass={primaryButtonClass}
+                    primaryDisabled={this.props.buttonDisabled}
                     cancelButton={this.props.cancelButton}
                     hasCancel={this.props.hasCancelButton && !this.props.quitOnly}
                     onPrimaryButtonClick={this.onOk}

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -1,49 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-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 QuestionDialog from './QuestionDialog';
-import { _t } from '../../../languageHandler';
-
-export default (props) => {
-    const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
-        "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
-    const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
-
-    const description1 =
-        _t("If you run into any bugs or have feedback you'd like to share, " +
-           "please let us know on GitHub.");
-    const description2 = _t("To help avoid duplicate issues, " +
-        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
-        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
-        "if you can't find it.", {},
-        {
-            existingIssuesLink: (sub) => {
-                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
-            },
-            newIssueLink: (sub) => {
-                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
-            },
-        });
-
-    return (<QuestionDialog
-        hasCancelButton={false}
-        title={_t("Report bugs & give feedback")}
-        description={<div><p>{description1}</p><p>{description2}</p></div>}
-        button={_t("Go back")}
-        onFinished={props.onFinished}
-    />);
-};

src/components/views/dialogs/RoomSettingsDialog.js

@@ -29,6 +29,7 @@ import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
 export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
@@ -96,12 +97,14 @@ export default class RoomSettingsDialog extends React.Component {
             ));
         }
 
-        tabs.push(new Tab(
-            ROOM_ADVANCED_TAB,
-            _td("Advanced"),
-            "mx_RoomSettingsDialog_warningIcon",
-            <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,
-        ));
+        if (SettingsStore.getValue(UIFeature.AdvancedSettings)) {
+            tabs.push(new Tab(
+                ROOM_ADVANCED_TAB,
+                _td("Advanced"),
+                "mx_RoomSettingsDialog_warningIcon",
+                <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,
+            ));
+        }
 
         return tabs;
     }

src/components/views/dialogs/SetMxIdDialog.js

@@ -1,304 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-
-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, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import classnames from 'classnames';
-import { Key } from '../../../Keyboard';
-import { _t } from '../../../languageHandler';
-import { SAFE_LOCALPART_REGEX } from '../../../Registration';
-
-// The amount of time to wait for further changes to the input username before
-// sending a request to the server
-const USERNAME_CHECK_DEBOUNCE_MS = 250;
-
-/*
- * Prompt the user to set a display name.
- *
- * On success, `onFinished(true, newDisplayName)` is called.
- */
-export default class SetMxIdDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        // Called when the user requests to register with a different homeserver
-        onDifferentServerClicked: PropTypes.func.isRequired,
-        // Called if the user wants to switch to login instead
-        onLoginClick: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._input_value = createRef();
-        this._uiAuth = createRef();
-
-        this.state = {
-            // The entered username
-            username: '',
-            // Indicate ongoing work on the username
-            usernameBusy: false,
-            // Indicate error with username
-            usernameError: '',
-            // Assume the homeserver supports username checking until "M_UNRECOGNIZED"
-            usernameCheckSupport: true,
-
-            // Whether the auth UI is currently being used
-            doingUIAuth: false,
-            // Indicate error with auth
-            authError: '',
-        };
-    }
-
-    componentDidMount() {
-        this._input_value.current.select();
-
-        this._matrixClient = MatrixClientPeg.get();
-    }
-
-    onValueChange = ev => {
-        this.setState({
-            username: ev.target.value,
-            usernameBusy: true,
-            usernameError: '',
-        }, () => {
-            if (!this.state.username || !this.state.usernameCheckSupport) {
-                this.setState({
-                    usernameBusy: false,
-                });
-                return;
-            }
-
-            // Debounce the username check to limit number of requests sent
-            if (this._usernameCheckTimeout) {
-                clearTimeout(this._usernameCheckTimeout);
-            }
-            this._usernameCheckTimeout = setTimeout(() => {
-                this._doUsernameCheck().finally(() => {
-                    this.setState({
-                        usernameBusy: false,
-                    });
-                });
-            }, USERNAME_CHECK_DEBOUNCE_MS);
-        });
-    };
-
-    onKeyUp = ev => {
-        if (ev.key === Key.ENTER) {
-            this.onSubmit();
-        }
-    };
-
-    onSubmit = ev => {
-        if (this._uiAuth.current) {
-            this._uiAuth.current.tryContinue();
-        }
-        this.setState({
-            doingUIAuth: true,
-        });
-    };
-
-    _doUsernameCheck() {
-        // We do a quick check ahead of the username availability API to ensure the
-        // user ID roughly looks okay from a Matrix perspective.
-        if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
-            this.setState({
-                usernameError: _t("A username can only contain lower case letters, numbers and '=_-./'"),
-            });
-            return Promise.reject();
-        }
-
-        // Check if username is available
-        return this._matrixClient.isUsernameAvailable(this.state.username).then(
-            (isAvailable) => {
-                if (isAvailable) {
-                    this.setState({usernameError: ''});
-                }
-            },
-            (err) => {
-                // Indicate whether the homeserver supports username checking
-                const newState = {
-                    usernameCheckSupport: err.errcode !== "M_UNRECOGNIZED",
-                };
-                console.error('Error whilst checking username availability: ', err);
-                switch (err.errcode) {
-                    case "M_USER_IN_USE":
-                        newState.usernameError = _t('Username not available');
-                        break;
-                    case "M_INVALID_USERNAME":
-                        newState.usernameError = _t(
-                            'Username invalid: %(errMessage)s',
-                            { errMessage: err.message},
-                        );
-                        break;
-                    case "M_UNRECOGNIZED":
-                        // This homeserver doesn't support username checking, assume it's
-                        // fine and rely on the error appearing in registration step.
-                        newState.usernameError = '';
-                        break;
-                    case undefined:
-                        newState.usernameError = _t('Something went wrong!');
-                        break;
-                    default:
-                        newState.usernameError = _t(
-                            'An error occurred: %(error_string)s',
-                            { error_string: err.message },
-                        );
-                        break;
-                }
-                this.setState(newState);
-            },
-        );
-    }
-
-    _generatePassword() {
-        return Math.random().toString(36).slice(2);
-    }
-
-    _makeRegisterRequest = auth => {
-        // Not upgrading - changing mxids
-        const guestAccessToken = null;
-        if (!this._generatedPassword) {
-            this._generatedPassword = this._generatePassword();
-        }
-        return this._matrixClient.register(
-            this.state.username,
-            this._generatedPassword,
-            undefined, // session id: included in the auth dict already
-            auth,
-            {},
-            guestAccessToken,
-        );
-    };
-
-    _onUIAuthFinished = (success, response) => {
-        this.setState({
-            doingUIAuth: false,
-        });
-
-        if (!success) {
-            this.setState({ authError: response.message });
-            return;
-        }
-
-        this.props.onFinished(true, {
-            userId: response.user_id,
-            deviceId: response.device_id,
-            homeserverUrl: this._matrixClient.getHomeserverUrl(),
-            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
-            accessToken: response.access_token,
-            password: this._generatedPassword,
-        });
-    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
-
-        let auth;
-        if (this.state.doingUIAuth) {
-            auth = <InteractiveAuth
-                matrixClient={this._matrixClient}
-                makeRequest={this._makeRegisterRequest}
-                onAuthFinished={this._onUIAuthFinished}
-                inputs={{}}
-                poll={true}
-                ref={this._uiAuth}
-                continueIsManaged={true}
-            />;
-        }
-        const inputClasses = classnames({
-            "mx_SetMxIdDialog_input": true,
-            "error": Boolean(this.state.usernameError),
-        });
-
-        let usernameIndicator = null;
-        if (this.state.usernameBusy) {
-            usernameIndicator = <div>{_t("Checking...")}</div>;
-        } else {
-            const usernameAvailable = this.state.username &&
-                this.state.usernameCheckSupport && !this.state.usernameError;
-            const usernameIndicatorClasses = classnames({
-                "error": Boolean(this.state.usernameError),
-                "success": usernameAvailable,
-            });
-            usernameIndicator = <div className={usernameIndicatorClasses} role="alert">
-                { usernameAvailable ? _t('Username available') : this.state.usernameError }
-            </div>;
-        }
-
-        let authErrorIndicator = null;
-        if (this.state.authError) {
-            authErrorIndicator = <div className="error" role="alert">
-                { this.state.authError }
-            </div>;
-        }
-        const canContinue = this.state.username &&
-            !this.state.usernameError &&
-            !this.state.usernameBusy;
-
-        return (
-            <BaseDialog className="mx_SetMxIdDialog"
-                onFinished={this.props.onFinished}
-                title={_t('To get started, please pick a username!')}
-                contentId='mx_Dialog_content'
-            >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    <div className="mx_SetMxIdDialog_input_group">
-                        <input type="text" ref={this._input_value} value={this.state.username}
-                            autoFocus={true}
-                            onChange={this.onValueChange}
-                            onKeyUp={this.onKeyUp}
-                            size="30"
-                            className={inputClasses}
-                        />
-                    </div>
-                    { usernameIndicator }
-                    <p>
-                        { _t(
-                            'This will be your account name on the <span></span> ' +
-                            'homeserver, or you can pick a <a>different server</a>.',
-                            {},
-                            {
-                                'span': <span>{ this.props.homeserverUrl }</span>,
-                                'a': (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
-                            },
-                        ) }
-                    </p>
-                    <p>
-                        { _t(
-                            'If you already have a Matrix account you can <a>log in</a> instead.',
-                            {},
-                            { 'a': (sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a> },
-                        ) }
-                    </p>
-                    { auth }
-                    { authErrorIndicator }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <input className="mx_Dialog_primary"
-                        type="submit"
-                        value={_t("Continue")}
-                        onClick={this.onSubmit}
-                        disabled={!canContinue}
-                    />
-                </div>
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/SetPasswordDialog.js

@@ -1,128 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-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 PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import Modal from '../../../Modal';
-
-const WarmFuzzy = function(props) {
-    const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-    let title = _t('You have successfully set a password!');
-    if (props.didSetEmail) {
-        title = _t('You have successfully set a password and an email address!');
-    }
-    const advice = _t('You can now return to your account after signing out, and sign in on other devices.');
-    let extraAdvice = null;
-    if (!props.didSetEmail) {
-        extraAdvice = _t('Remember, you can always set an email address in user settings if you change your mind.');
-    }
-
-    return <BaseDialog className="mx_SetPasswordDialog"
-        onFinished={props.onFinished}
-        title={ title }
-    >
-        <div className="mx_Dialog_content">
-            <p>
-                { advice }
-            </p>
-            <p>
-                { extraAdvice }
-            </p>
-        </div>
-        <div className="mx_Dialog_buttons">
-            <button
-                className="mx_Dialog_primary"
-                autoFocus={true}
-                onClick={props.onFinished}>
-                    { _t('Continue') }
-            </button>
-        </div>
-    </BaseDialog>;
-};
-
-/**
- * Prompt the user to set a password
- *
- * On success, `onFinished()` when finished
- */
-export default class SetPasswordDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    state = {
-        error: null,
-    };
-
-    _onPasswordChanged = res => {
-        Modal.createDialog(WarmFuzzy, {
-            didSetEmail: res.didSetEmail,
-            onFinished: () => {
-                this.props.onFinished();
-            },
-        });
-    };
-
-    _onPasswordChangeError = err => {
-        let errMsg = err.error || "";
-        if (err.httpStatus === 403) {
-            errMsg = _t('Failed to change password. Is your password correct?');
-        } else if (err.httpStatus) {
-            errMsg += ' ' + _t(
-                '(HTTP status %(httpStatus)s)',
-                { httpStatus: err.httpStatus },
-            );
-        }
-        this.setState({
-            error: errMsg,
-        });
-    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const ChangePassword = sdk.getComponent('views.settings.ChangePassword');
-
-        return (
-            <BaseDialog className="mx_SetPasswordDialog"
-                onFinished={this.props.onFinished}
-                title={ _t('Please set a password!') }
-            >
-                <div className="mx_Dialog_content">
-                    <p>
-                        { _t('This will allow you to return to your account after signing out, and sign in on other sessions.') }
-                    </p>
-                    <ChangePassword
-                        className="mx_SetPasswordDialog_change_password"
-                        rowClassName=""
-                        buttonClassNames="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
-                        buttonKind="primary"
-                        confirm={false}
-                        autoFocusNewPasswordInput={true}
-                        shouldAskForEmail={true}
-                        onError={this._onPasswordChangeError}
-                        onFinished={this._onPasswordChanged} />
-                    <div className="error">
-                        { this.state.error }
-                    </div>
-                </div>
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/ShareDialog.tsx

@@ -32,6 +32,8 @@ import {copyPlaintext, selectText} from "../../../utils/strings";
 import StyledCheckbox from '../elements/StyledCheckbox';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { IDialogProps } from "./IDialogProps";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
 
 const socials = [
     {
@@ -197,6 +199,35 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         const matrixToUrl = this.getUrl();
         const encodedUrl = encodeURIComponent(matrixToUrl);
 
+        const showQrCode = SettingsStore.getValue(UIFeature.ShareQRCode);
+        const showSocials = SettingsStore.getValue(UIFeature.ShareSocial);
+
+        let qrSocialSection;
+        if (showQrCode || showSocials) {
+            qrSocialSection = <>
+                <hr />
+                <div className="mx_ShareDialog_split">
+                    { showQrCode && <div className="mx_ShareDialog_qrcode_container">
+                        <QRCode data={matrixToUrl} width={256} />
+                    </div> }
+                    { showSocials && <div className="mx_ShareDialog_social_container">
+                        { socials.map((social) => (
+                            <a
+                                rel="noreferrer noopener"
+                                target="_blank"
+                                key={social.name}
+                                title={social.name}
+                                href={social.url(encodedUrl)}
+                                className="mx_ShareDialog_social_icon"
+                            >
+                                <img src={social.img} alt={social.name} height={64} width={64} />
+                            </a>
+                        )) }
+                    </div> }
+                </div>
+            </>;
+        }
+
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return <BaseDialog
             title={title}
@@ -220,27 +251,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
                     />
                 </div>
                 { checkbox }
-                <hr />
-
-                <div className="mx_ShareDialog_split">
-                    <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode data={matrixToUrl} width={256} />
-                    </div>
-                    <div className="mx_ShareDialog_social_container">
-                        { socials.map((social) => (
-                            <a
-                                rel="noreferrer noopener"
-                                target="_blank"
-                                key={social.name}
-                                title={social.name}
-                                href={social.url(encodedUrl)}
-                                className="mx_ShareDialog_social_icon"
-                            >
-                                <img src={social.img} alt={social.name} height={64} width={64} />
-                            </a>
-                        )) }
-                    </div>
-                </div>
+                { qrSocialSection }
             </div>
         </BaseDialog>;
     }

src/components/views/dialogs/SlashCommandHelpDialog.js

@@ -24,6 +24,7 @@ export default ({onFinished}) => {
 
     const categories = {};
     Commands.forEach(cmd => {
+        if (!cmd.isEnabled()) return;
         if (!categories[cmd.category]) {
             categories[cmd.category] = [];
         }

src/components/views/dialogs/UserSettingsDialog.js

@@ -32,6 +32,7 @@ import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
 import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
+import {UIFeature} from "../../../settings/UIFeature";
 
 export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
 export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
@@ -86,12 +87,14 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_appearanceIcon",
             <AppearanceUserSettingsTab />,
         ));
-        tabs.push(new Tab(
-            USER_FLAIR_TAB,
-            _td("Flair"),
-            "mx_UserSettingsDialog_flairIcon",
-            <FlairUserSettingsTab />,
-        ));
+        if (SettingsStore.getValue(UIFeature.Flair)) {
+            tabs.push(new Tab(
+                USER_FLAIR_TAB,
+                _td("Flair"),
+                "mx_UserSettingsDialog_flairIcon",
+                <FlairUserSettingsTab />,
+            ));
+        }
         tabs.push(new Tab(
             USER_NOTIFICATIONS_TAB,
             _td("Notifications"),
@@ -104,12 +107,16 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_preferencesIcon",
             <PreferencesUserSettingsTab />,
         ));
-        tabs.push(new Tab(
-            USER_VOICE_TAB,
-            _td("Voice & Video"),
-            "mx_UserSettingsDialog_voiceIcon",
-            <VoiceUserSettingsTab />,
-        ));
+
+        if (SettingsStore.getValue(UIFeature.Voip)) {
+            tabs.push(new Tab(
+                USER_VOICE_TAB,
+                _td("Voice & Video"),
+                "mx_UserSettingsDialog_voiceIcon",
+                <VoiceUserSettingsTab />,
+            ));
+        }
+
         tabs.push(new Tab(
             USER_SECURITY_TAB,
             _td("Security & Privacy"),

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js

@@ -84,7 +84,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
                             "A widget located at %(widgetUrl)s would like to verify your identity. " +
                             "By allowing this, the widget will be able to verify your user ID, but not " +
                             "perform actions as you.", {
-                                widgetUrl: this.props.widgetUrl,
+                                widgetUrl: this.props.widgetUrl.split("?")[0],
                             },
                         )}
                     </p>

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

@@ -289,7 +289,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             content = <div>
                 <p>{_t("Use your Security Key to continue.")}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext} spellCheck={false}>
+                <form
+                    className="mx_AccessSecretStorageDialog_primaryContainer"
+                    onSubmit={this._onRecoveryKeyNext}
+                    spellCheck={false}
+                    autoComplete="off"
+                >
                     <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
                         <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
                             <Field
@@ -298,6 +303,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                                 value={this.state.recoveryKey}
                                 onChange={this._onRecoveryKeyChange}
                                 forceValidity={this.state.recoveryKeyCorrect}
+                                autoComplete="off"
                             />
                         </div>
                         <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">

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

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
-import * as sdk from "../../../index";
+import {_t} from "../../../../languageHandler";
+import * as sdk from "../../../../index";
 
 export default class ConfirmDestroyCrossSigningDialog extends React.Component {
     static propTypes = {

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

@@ -0,0 +1,187 @@
+/*
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2019, 2020 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 PropTypes from 'prop-types';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
+import { _t } from '../../../../languageHandler';
+import Modal from '../../../../Modal';
+import { SSOAuthEntry } from '../../auth/InteractiveAuthEntryComponents';
+import DialogButtons from '../../elements/DialogButtons';
+import BaseDialog from '../BaseDialog';
+import Spinner from '../../elements/Spinner';
+import InteractiveAuthDialog from '../InteractiveAuthDialog';
+
+/*
+ * 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.
+ */
+export default class CreateCrossSigningDialog extends React.PureComponent {
+    static propTypes = {
+        accountPassword: PropTypes.string,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+            // Does the server offer a UI auth flow with just m.login.password
+            // for /keys/device_signing/upload?
+            canUploadKeysWithPasswordOnly: null,
+            accountPassword: props.accountPassword || "",
+        };
+
+        if (this.state.accountPassword) {
+            // If we have an account password in memory, let's simplify and
+            // assume it means password auth is also supported for device
+            // signing key upload as well. This avoids hitting the server to
+            // test auth flows, which may be slow under high load.
+            this.state.canUploadKeysWithPasswordOnly = true;
+        } else {
+            this._queryKeyUploadAuth();
+        }
+    }
+
+    componentDidMount() {
+        this._bootstrapCrossSigning();
+    }
+
+    async _queryKeyUploadAuth() {
+        try {
+            await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {});
+            // We should never get here: the server should always require
+            // UI auth to upload device signing keys. If we do, we upload
+            // no keys which would be a no-op.
+            console.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
+        } catch (error) {
+            if (!error.data || !error.data.flows) {
+                console.log("uploadDeviceSigningKeys advertised no flows!");
+                return;
+            }
+            const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
+                return f.stages.length === 1 && f.stages[0] === 'm.login.password';
+            });
+            this.setState({
+                canUploadKeysWithPasswordOnly,
+            });
+        }
+    }
+
+    _doBootstrapUIAuth = async (makeRequest) => {
+        if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
+            await makeRequest({
+                type: 'm.login.password',
+                identifier: {
+                    type: 'm.id.user',
+                    user: MatrixClientPeg.get().getUserId(),
+                },
+                // TODO: Remove `user` once servers support proper UIA
+                // See https://github.com/matrix-org/synapse/issues/5665
+                user: MatrixClientPeg.get().getUserId(),
+                password: this.state.accountPassword,
+            });
+        } else {
+            const dialogAesthetics = {
+                [SSOAuthEntry.PHASE_PREAUTH]: {
+                    title: _t("Use Single Sign On to continue"),
+                    body: _t("To continue, use Single Sign On to prove your identity."),
+                    continueText: _t("Single Sign On"),
+                    continueKind: "primary",
+                },
+                [SSOAuthEntry.PHASE_POSTAUTH]: {
+                    title: _t("Confirm encryption setup"),
+                    body: _t("Click the button below to confirm setting up encryption."),
+                    continueText: _t("Confirm"),
+                    continueKind: "primary",
+                },
+            };
+
+            const { finished } = Modal.createTrackedDialog(
+                'Cross-signing keys dialog', '', InteractiveAuthDialog,
+                {
+                    title: _t("Setting up keys"),
+                    matrixClient: MatrixClientPeg.get(),
+                    makeRequest,
+                    aestheticsForStagePhases: {
+                        [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                        [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                    },
+                },
+            );
+            const [confirmed] = await finished;
+            if (!confirmed) {
+                throw new Error("Cross-signing key upload auth canceled");
+            }
+        }
+    }
+
+    _bootstrapCrossSigning = async () => {
+        this.setState({
+            error: null,
+        });
+
+        const cli = MatrixClientPeg.get();
+
+        try {
+            await cli.bootstrapCrossSigning({
+                authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
+            });
+            this.props.onFinished(true);
+        } catch (e) {
+            this.setState({ error: e });
+            console.error("Error bootstrapping cross-signing", e);
+        }
+    }
+
+    _onCancel = () => {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        let content;
+        if (this.state.error) {
+            content = <div>
+                <p>{_t("Unable to set up keys")}</p>
+                <div className="mx_Dialog_buttons">
+                    <DialogButtons primaryButton={_t('Retry')}
+                        onPrimaryButtonClick={this._bootstrapCrossSigning}
+                        onCancel={this._onCancel}
+                    />
+                </div>
+            </div>;
+        } else {
+            content = <div>
+                <Spinner />
+            </div>;
+        }
+
+        return (
+            <BaseDialog className="mx_CreateCrossSigningDialog"
+                onFinished={this.props.onFinished}
+                title={_t("Setting up keys")}
+                hasCancel={false}
+                fixedWidth={false}
+            >
+                <div>
+                    {content}
+                </div>
+            </BaseDialog>
+        );
+    }
+}

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

@@ -16,16 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import SetupEncryptionBody from '../../structures/auth/SetupEncryptionBody';
-import BaseDialog from './BaseDialog';
-import { _t } from '../../../languageHandler';
-import { SetupEncryptionStore, PHASE_DONE } from '../../../stores/SetupEncryptionStore';
+import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
+import BaseDialog from '../BaseDialog';
+import { _t } from '../../../../languageHandler';
+import { SetupEncryptionStore, PHASE_DONE } from '../../../../stores/SetupEncryptionStore';
 
 function iconFromPhase(phase) {
     if (phase === PHASE_DONE) {
-        return require("../../../../res/img/e2e/verified.svg");
+        return require("../../../../../res/img/e2e/verified.svg");
     } else {
-        return require("../../../../res/img/e2e/warning.svg");
+        return require("../../../../../res/img/e2e/warning.svg");
     }
 }
 

src/components/views/elements/AccessibleButton.tsx

@@ -39,7 +39,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     tabIndex?: number;
     disabled?: boolean;
     className?: string;
-    onClick?(e?: ButtonEvent): void;
+    onClick(e?: ButtonEvent): void;
 }
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -26,6 +26,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     tooltip?: React.ReactNode;
     tooltipClassName?: string;
     forceHide?: boolean;
+    yOffset?: number;
 }
 
 interface IState {
@@ -62,12 +63,14 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
     };
 
     render() {
-        const {title, tooltip, children, tooltipClassName, ...props} = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
             label={tooltip || title}
+            yOffset={yOffset}
         /> : <div />;
         return (
             <AccessibleButton

src/components/views/elements/AddressSelector.js

@@ -46,7 +46,7 @@ export default class AddressSelector extends React.Component {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) { // eslint-disable-line camelcase
         // Make sure the selected item isn't outside the list bounds
         const selected = this.state.selected;
         const maxSelected = this._maxSelected(props.addressList);

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -0,0 +1,77 @@
+/*
+Copyright 2020 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 EventIndexPeg from "../../../indexing/EventIndexPeg";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import React from "react";
+
+export enum WarningKind {
+    Files,
+    Search,
+}
+
+interface IProps {
+    isRoomEncrypted: boolean;
+    kind: WarningKind;
+}
+
+export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
+    if (!isRoomEncrypted) return null;
+    if (EventIndexPeg.get()) return null;
+
+    const {desktopBuilds, brand} = SdkConfig.get();
+
+    let text = null;
+    let logo = null;
+    if (desktopBuilds.available) {
+        logo = <img src={desktopBuilds.logo} />;
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("Use the <a>Desktop app</a> to see all encrypted files", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+            case WarningKind.Search:
+                text = _t("Use the <a>Desktop app</a> to search encrypted messages", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+        }
+    } else {
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("This version of %(brand)s does not support viewing some encrypted files", {brand});
+                break;
+            case WarningKind.Search:
+                text = _t("This version of %(brand)s does not support searching encrypted messages", {brand});
+                break;
+        }
+    }
+
+    // for safety
+    if (!text) {
+        console.warn("Unknown desktop builds warning kind: ", kind);
+        return null;
+    }
+
+    return (
+        <div className="mx_DesktopBuildsNotice">
+            {logo}
+            <span>{text}</span>
+        </div>
+    );
+}

src/components/views/elements/DirectorySearchBox.js

@@ -16,13 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default class DirectorySearchBox extends React.Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this._collectInput = this._collectInput.bind(this);
         this._onClearClick = this._onClearClick.bind(this);
         this._onChange = this._onChange.bind(this);
@@ -32,7 +31,7 @@ export default class DirectorySearchBox extends React.Component {
         this.input = null;
 
         this.state = {
-            value: '',
+            value: this.props.initialText || '',
         };
     }
 
@@ -78,28 +77,33 @@ export default class DirectorySearchBox extends React.Component {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
-        const searchbox_classes = {
+        const searchboxClasses = {
             mx_DirectorySearchBox: true,
         };
-        searchbox_classes[this.props.className] = true;
+        searchboxClasses[this.props.className] = true;
 
-        let join_button;
+        let joinButton;
         if (this.props.showJoinButton) {
-            join_button = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
+            joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
                 onClick={this._onJoinButtonClick}
             >{_t("Join")}</AccessibleButton>;
         }
 
         return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>
-                <input type="text" name="dirsearch" value={this.state.value}
-                    className="mx_textinput_icon mx_textinput_search"
-                    ref={this._collectInput}
-                    onChange={this._onChange} onKeyUp={this._onKeyUp}
-                    placeholder={this.props.placeholder} autoFocus
-                />
-                { join_button }
-                <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick}></AccessibleButton>
-            </div>;
+            <input
+                type="text"
+                name="dirsearch"
+                value={this.state.value}
+                className="mx_textinput_icon mx_textinput_search"
+                ref={this._collectInput}
+                onChange={this._onChange}
+                onKeyUp={this._onKeyUp}
+                placeholder={this.props.placeholder}
+                autoFocus
+            />
+            { joinButton }
+            <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
+        </div>;
     }
 }
 
@@ -110,4 +114,5 @@ DirectorySearchBox.propTypes = {
     onJoinClick: PropTypes.func,
     placeholder: PropTypes.string,
     showJoinButton: PropTypes.bool,
+    initialText: PropTypes.string,
 };

src/components/views/elements/ErrorBoundary.js

@@ -20,6 +20,7 @@ import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import Modal from '../../../Modal';
+import SdkConfig from "../../../SdkConfig";
 
 /**
  * This error boundary component can be used to wrap large content areas and
@@ -73,9 +74,10 @@ export default class ErrorBoundary extends React.PureComponent {
         if (this.state.error) {
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
-            return <div className="mx_ErrorBoundary">
-                <div className="mx_ErrorBoundary_body">
-                    <h1>{_t("Something went wrong!")}</h1>
+
+            let bugReportSection;
+            if (SdkConfig.get().bug_report_endpoint_url) {
+                bugReportSection = <React.Fragment>
                     <p>{_t(
                         "Please <newIssueLink>create a new issue</newIssueLink> " +
                         "on GitHub so that we can investigate this bug.", {}, {
@@ -94,6 +96,13 @@ export default class ErrorBoundary extends React.PureComponent {
                     <AccessibleButton onClick={this._onBugReport} kind='primary'>
                         {_t("Submit debug logs")}
                     </AccessibleButton>
+                </React.Fragment>;
+            }
+
+            return <div className="mx_ErrorBoundary">
+                <div className="mx_ErrorBoundary_body">
+                    <h1>{_t("Something went wrong!")}</h1>
+                    { bugReportSection }
                     <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
                         {_t("Clear cache and reload")}
                     </AccessibleButton>

src/components/views/elements/EventListSummary.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,15 +14,41 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect} from 'react';
-import PropTypes from 'prop-types';
+import React, {ReactChildren, useEffect} from 'react';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
-import {MatrixEvent, RoomMember} from "matrix-js-sdk";
 import {useStateToggle} from "../../../hooks/useStateToggle";
 import AccessibleButton from "./AccessibleButton";
 
-const EventListSummary = ({events, children, threshold=3, onToggle, startExpanded, summaryMembers=[], summaryText}) => {
+interface IProps {
+    // An array of member events to summarise
+    events: MatrixEvent[];
+    // The minimum number of events needed to trigger summarisation
+    threshold?: number;
+    // Whether or not to begin with state.expanded=true
+    startExpanded?: boolean,
+    // The list of room members for which to show avatars next to the summary
+    summaryMembers?: RoomMember[],
+    // The text to show as the summary of this event list
+    summaryText?: string,
+    // An array of EventTiles to render when expanded
+    children: ReactChildren,
+    // Called when the event list expansion is toggled
+    onToggle?(): void;
+}
+
+const EventListSummary: React.FC<IProps> = ({
+    events,
+    children,
+    threshold = 3,
+    onToggle,
+    startExpanded,
+    summaryMembers = [],
+    summaryText,
+}) => {
     const [expanded, toggleExpanded] = useStateToggle(startExpanded);
 
     // Whenever expanded changes call onToggle
@@ -75,22 +101,4 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
     );
 };
 
-EventListSummary.propTypes = {
-    // An array of member events to summarise
-    events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
-    // An array of EventTiles to render when expanded
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    // The minimum number of events needed to trigger summarisation
-    threshold: PropTypes.number,
-    // Called when the event list expansion is toggled
-    onToggle: PropTypes.func,
-    // Whether or not to begin with state.expanded=true
-    startExpanded: PropTypes.bool,
-
-    // The list of room members for which to show avatars next to the summary
-    summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
-    // The text to show as the summary of this event list
-    summaryText: PropTypes.string,
-};
-
 export default EventListSummary;

src/components/views/elements/EventTilePreview.tsx

@@ -21,6 +21,8 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import * as Avatar from '../../../Avatar';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTile from '../rooms/EventTile';
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
 
 interface IProps {
     /**
@@ -78,27 +80,30 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
     private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
         // Fake it till we make it
-        const event = new MatrixEvent(JSON.parse(`{
-                "type": "m.room.message",
-                "sender": "${userId}",
-                "content": {
-                  "m.new_content": {
-                    "msgtype": "m.text",
-                    "body": "${this.props.message}",
-                    "displayname": "${displayname}",
-                    "avatar_url": "${avatarUrl}"
-                  },
-                  "msgtype": "m.text",
-                  "body": "${this.props.message}",
-                  "displayname": "${displayname}",
-                  "avatar_url": "${avatarUrl}"
+        /* eslint-disable quote-props */
+        const rawEvent = {
+            type: "m.room.message",
+            sender: userId,
+            content: {
+                "m.new_content": {
+                    msgtype: "m.text",
+                    body: this.props.message,
+                    displayname: displayname,
+                    avatar_url: avatarUrl,
                 },
-                "unsigned": {
-                  "age": 97
-                },
-                "event_id": "$9999999999999999999999999999999999999999999",
-                "room_id": "!999999999999999999:matrix.org"
-              }`));
+                msgtype: "m.text",
+                body: this.props.message,
+                displayname: displayname,
+                avatar_url: avatarUrl,
+            },
+            unsigned: {
+                age: 97,
+            },
+            event_id: "$9999999999999999999999999999999999999999999",
+            room_id: "!999999999999999999:example.org",
+        };
+        const event = new MatrixEvent(rawEvent);
+        /* eslint-enable quote-props */
 
         // Fake it more
         event.sender = {
@@ -121,7 +126,11 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         });
 
         return <div className={className}>
-            <EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
+            <EventTile
+                mxEvent={event}
+                useIRCLayout={this.props.useIRCLayout}
+                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+            />
         </div>;
     }
 }

src/components/views/elements/IconButton.js

@@ -1,34 +0,0 @@
-/*
-Copyright 2019 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 PropTypes from 'prop-types';
-import AccessibleButton from "./AccessibleButton";
-
-export default function IconButton(props) {
-    const {icon, className, ...restProps} = props;
-
-    let newClassName = (className || "") + " mx_IconButton";
-    newClassName = newClassName + " mx_IconButton_icon_" + icon;
-
-    const allProps = Object.assign({}, restProps, {className: newClassName});
-
-    return React.createElement(AccessibleButton, allProps);
-}
-
-IconButton.propTypes = Object.assign({
-    icon: PropTypes.string,
-}, AccessibleButton.propTypes);

src/components/views/elements/ManageIntegsButton.js

@@ -1,63 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-Copyright 2019 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 PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import SettingsStore from "../../../settings/SettingsStore";
-import AccessibleTooltipButton from "./AccessibleTooltipButton";
-
-export default class ManageIntegsButton extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    onManageIntegrations = (ev) => {
-        ev.preventDefault();
-
-        const managers = IntegrationManagers.sharedInstance();
-        if (!managers.hasManager()) {
-            managers.openNoManagerDialog();
-        } else {
-            if (SettingsStore.getValue("feature_many_integration_managers")) {
-                managers.openAll(this.props.room);
-            } else {
-                managers.getPrimaryManager().open(this.props.room);
-            }
-        }
-    };
-
-    render() {
-        let integrationsButton = <div />;
-        if (IntegrationManagers.sharedInstance().hasManager()) {
-            integrationsButton = (
-                <AccessibleTooltipButton
-                    className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
-                    title={_t("Manage Integrations")}
-                    onClick={this.onManageIntegrations}
-                />
-            );
-        }
-
-        return integrationsButton;
-    }
-}
-
-ManageIntegsButton.propTypes = {
-    room: PropTypes.object.isRequired,
-};

src/components/views/elements/MemberEventListSummary.tsx

@@ -16,32 +16,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactChildren } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-import * as sdk from "../../../index";
-import {MatrixEvent} from "matrix-js-sdk";
-import {isValid3pidInvite} from "../../../RoomInvite";
+import { isValid3pidInvite } from "../../../RoomInvite";
+import EventListSummary from "./EventListSummary";
 
-export default class MemberEventListSummary extends React.Component {
-    static propTypes = {
-        // An array of member events to summarise
-        events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
-        // An array of EventTiles to render when expanded
-        children: PropTypes.array.isRequired,
-        // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
-        summaryLength: PropTypes.number,
-        // The maximum number of avatars to display in the summary
-        avatarsMaxLength: PropTypes.number,
-        // The minimum number of events needed to trigger summarisation
-        threshold: PropTypes.number,
-        // Called when the MELS expansion is toggled
-        onToggle: PropTypes.func,
-        // Whether or not to begin with state.expanded=true
-        startExpanded: PropTypes.bool,
-    };
+interface IProps {
+    // An array of member events to summarise
+    events: MatrixEvent[];
+    // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
+    summaryLength?: number;
+    // The maximum number of avatars to display in the summary
+    avatarsMaxLength?: number;
+    // The minimum number of events needed to trigger summarisation
+    threshold?: number,
+    // Whether or not to begin with state.expanded=true
+    startExpanded?: boolean,
+    // An array of EventTiles to render when expanded
+    children: ReactChildren;
+    // Called when the MELS expansion is toggled
+    onToggle?(): void,
+}
 
+interface IUserEvents {
+    // The original event
+    mxEvent: MatrixEvent;
+    // The display name of the user (if not, then user ID)
+    displayName: string;
+    // The original index of the event in this.props.events
+    index: number;
+}
+
+enum TransitionType {
+    Joined = "joined",
+    Left = "left",
+    JoinedAndLeft = "joined_and_left",
+    LeftAndJoined = "left_and_joined",
+    InviteReject = "invite_reject",
+    InviteWithdrawal = "invite_withdrawal",
+    Invited = "invited",
+    Banned = "banned",
+    Unbanned = "unbanned",
+    Kicked = "kicked",
+    ChangedName = "changed_name",
+    ChangedAvatar = "changed_avatar",
+    NoChange = "no_change",
+}
+
+const SEP = ",";
+
+export default class MemberEventListSummary extends React.Component<IProps> {
     static defaultProps = {
         summaryLength: 1,
         threshold: 3,
@@ -62,30 +90,28 @@ export default class MemberEventListSummary extends React.Component {
     /**
      * Generate the text for users aggregated by their transition sequences (`eventAggregates`) where
      * the sequences are ordered by `orderedTransitionSequences`.
-     * @param {object[]} eventAggregates a map of transition sequence to array of user display names
+     * @param {object} eventAggregates a map of transition sequence to array of user display names
      * or user IDs.
      * @param {string[]} orderedTransitionSequences an array which is some ordering of
      * `Object.keys(eventAggregates)`.
      * @returns {string} the textual summary of the aggregated events that occurred.
      */
-    _generateSummary(eventAggregates, orderedTransitionSequences) {
+    private generateSummary(eventAggregates: Record<string, string[]>, orderedTransitionSequences: string[]) {
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
-            const nameList = this._renderNameList(userNames);
+            const nameList = this.renderNameList(userNames);
 
-            const splitTransitions = transitions.split(',');
+            const splitTransitions = transitions.split(SEP) as TransitionType[];
 
             // Some neighbouring transitions are common, so canonicalise some into "pair"
             // transitions
-            const canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            const canonicalTransitions = MemberEventListSummary.getCanonicalTransitions(splitTransitions);
             // Transform into consecutive repetitions of the same transition (like 5
             // consecutive 'joined_and_left's)
-            const coalescedTransitions = this._coalesceRepeatedTransitions(
-                canonicalTransitions,
-            );
+            const coalescedTransitions = MemberEventListSummary.coalesceRepeatedTransitions(canonicalTransitions);
 
             const descs = coalescedTransitions.map((t) => {
-                return this._getDescriptionForTransition(
+                return MemberEventListSummary.getDescriptionForTransition(
                     t.transitionType, userNames.length, t.repeats,
                 );
             });
@@ -108,7 +134,7 @@ export default class MemberEventListSummary extends React.Component {
      * more items in `users` than `this.props.summaryLength`, which is the number of names
      * included before "and [n] others".
      */
-    _renderNameList(users) {
+    private renderNameList(users: string[]) {
         return formatCommaSeparatedList(users, this.props.summaryLength);
     }
 
@@ -119,22 +145,22 @@ export default class MemberEventListSummary extends React.Component {
      * @param {string[]} transitions an array of transitions.
      * @returns {string[]} an array of transitions.
      */
-    _getCanonicalTransitions(transitions) {
+    private static getCanonicalTransitions(transitions: TransitionType[]): TransitionType[] {
         const modMap = {
-            'joined': {
-                'after': 'left',
-                'newTransition': 'joined_and_left',
+            [TransitionType.Joined]: {
+                after: TransitionType.Left,
+                newTransition: TransitionType.JoinedAndLeft,
             },
-            'left': {
-                'after': 'joined',
-                'newTransition': 'left_and_joined',
+            [TransitionType.Left]: {
+                after: TransitionType.Joined,
+                newTransition: TransitionType.LeftAndJoined,
             },
             // $currentTransition : {
             //     'after' : $nextTransition,
             //     'newTransition' : 'new_transition_type',
             // },
         };
-        const res = [];
+        const res: TransitionType[] = [];
 
         for (let i = 0; i < transitions.length; i++) {
             const t = transitions[i];
@@ -166,8 +192,12 @@ export default class MemberEventListSummary extends React.Component {
      * @param {string[]} transitions the array of transitions to transform.
      * @returns {object[]} an array of coalesced transitions.
      */
-    _coalesceRepeatedTransitions(transitions) {
-        const res = [];
+    private static coalesceRepeatedTransitions(transitions: TransitionType[]) {
+        const res: {
+            transitionType: TransitionType;
+            repeats: number;
+        }[] = [];
+
         for (let i = 0; i < transitions.length; i++) {
             if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
                 res[res.length - 1].repeats += 1;
@@ -189,7 +219,7 @@ export default class MemberEventListSummary extends React.Component {
      * @param {number} repeats the number of times the transition was repeated in a row.
      * @returns {string} the written Human Readable equivalent of the transition.
      */
-    _getDescriptionForTransition(t, userCount, repeats) {
+    private static getDescriptionForTransition(t: TransitionType, userCount: number, repeats: number) {
         // The empty interpolations 'severalUsers' and 'oneUser'
         // are there only to show translators to non-English languages
         // that the verb is conjugated to plural or singular Subject.
@@ -217,12 +247,18 @@ export default class MemberEventListSummary extends React.Component {
                 break;
             case "invite_reject":
                 res = (userCount > 1)
-                    ? _t("%(severalUsers)srejected their invitations %(count)s times", { severalUsers: "", count: repeats })
+                    ? _t("%(severalUsers)srejected their invitations %(count)s times", {
+                        severalUsers: "",
+                        count: repeats,
+                    })
                     : _t("%(oneUser)srejected their invitation %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invite_withdrawal":
                 res = (userCount > 1)
-                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", { severalUsers: "", count: repeats })
+                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", {
+                        severalUsers: "",
+                        count: repeats,
+                    })
                     : _t("%(oneUser)shad their invitation withdrawn %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invited":
@@ -265,8 +301,8 @@ export default class MemberEventListSummary extends React.Component {
         return res;
     }
 
-    _getTransitionSequence(events) {
-        return events.map(this._getTransition);
+    private static getTransitionSequence(events: MatrixEvent[]) {
+        return events.map(MemberEventListSummary.getTransition);
     }
 
     /**
@@ -277,60 +313,60 @@ export default class MemberEventListSummary extends React.Component {
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */
-    _getTransition(e) {
+    private static getTransition(e: MatrixEvent): TransitionType {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
             if (!isValid3pidInvite(e.mxEvent)) {
-                return 'invite_withdrawal';
+                return TransitionType.InviteWithdrawal;
             }
-            return 'invited';
+            return TransitionType.Invited;
         }
 
         switch (e.mxEvent.getContent().membership) {
-            case 'invite': return 'invited';
-            case 'ban': return 'banned';
+            case 'invite': return TransitionType.Invited;
+            case 'ban': return TransitionType.Banned;
             case 'join':
                 if (e.mxEvent.getPrevContent().membership === 'join') {
                     if (e.mxEvent.getContent().displayname !==
                         e.mxEvent.getPrevContent().displayname) {
-                        return 'changed_name';
+                        return TransitionType.ChangedName;
                     } else if (e.mxEvent.getContent().avatar_url !==
                         e.mxEvent.getPrevContent().avatar_url) {
-                        return 'changed_avatar';
+                        return TransitionType.ChangedAvatar;
                     }
                     // console.log("MELS ignoring duplicate membership join event");
-                    return 'no_change';
+                    return TransitionType.NoChange;
                 } else {
-                    return 'joined';
+                    return TransitionType.Joined;
                 }
             case 'leave':
                 if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) {
                     switch (e.mxEvent.getPrevContent().membership) {
-                        case 'invite': return 'invite_reject';
-                        default: return 'left';
+                        case 'invite': return TransitionType.InviteReject;
+                        default: return TransitionType.Left;
                     }
                 }
                 switch (e.mxEvent.getPrevContent().membership) {
-                    case 'invite': return 'invite_withdrawal';
-                    case 'ban': return 'unbanned';
+                    case 'invite': return TransitionType.InviteWithdrawal;
+                    case 'ban': return TransitionType.Unbanned;
                     // sender is not target and made the target leave, if not from invite/ban then this is a kick
-                    default: return 'kicked';
+                    default: return TransitionType.Kicked;
                 }
             default: return null;
         }
     }
 
-    _getAggregate(userEvents) {
+    getAggregate(userEvents: Record<string, IUserEvents[]>) {
         // A map of aggregate type to arrays of display names. Each aggregate type
         // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
         // The array of display names is the array of users who went through that
         // sequence during eventsToRender.
-        const aggregate = {
+        const aggregate: Record<string, string[]> = {
             // $aggregateType : []:string
         };
         // A map of aggregate types to the indices that order them (the index of
         // the first event for a given transition sequence)
-        const aggregateIndices = {
+        const aggregateIndices: Record<string, number> = {
             // $aggregateType : int
         };
 
@@ -340,7 +376,7 @@ export default class MemberEventListSummary extends React.Component {
                 const firstEvent = userEvents[userId][0];
                 const displayName = firstEvent.displayName;
 
-                const seq = this._getTransitionSequence(userEvents[userId]);
+                const seq = MemberEventListSummary.getTransitionSequence(userEvents[userId]).join(SEP);
                 if (!aggregate[seq]) {
                     aggregate[seq] = [];
                     aggregateIndices[seq] = -1;
@@ -349,8 +385,9 @@ export default class MemberEventListSummary extends React.Component {
                 aggregate[seq].push(displayName);
 
                 if (aggregateIndices[seq] === -1 ||
-                    firstEvent.index < aggregateIndices[seq]) {
-                        aggregateIndices[seq] = firstEvent.index;
+                    firstEvent.index < aggregateIndices[seq]
+                ) {
+                    aggregateIndices[seq] = firstEvent.index;
                 }
             },
         );
@@ -364,25 +401,21 @@ export default class MemberEventListSummary extends React.Component {
     render() {
         const eventsToRender = this.props.events;
 
-        // Map user IDs to an array of objects:
-        const userEvents = {
-            // $userId : [{
-            //     // The original event
-            //     mxEvent: e,
-            //     // The display name of the user (if not, then user ID)
-            //     displayName: e.target.name || userId,
-            //     // The original index of the event in this.props.events
-            //     index: index,
-            // }]
-        };
+        // Map user IDs to latest Avatar Member. ES6 Maps are ordered by when the key was created,
+        // so this works perfectly for us to match event order whilst storing the latest Avatar Member
+        const latestUserAvatarMember = new Map<string, RoomMember>();
 
-        const avatarMembers = [];
+        // Object mapping user IDs to an array of IUserEvents
+        const userEvents: Record<string, IUserEvents[]> = {};
         eventsToRender.forEach((e, index) => {
             const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
-                if (e.target) avatarMembers.push(e.target);
+            }
+
+            if (e.target) {
+                latestUserAvatarMember.set(userId, e.target);
             }
 
             let displayName = userId;
@@ -399,21 +432,20 @@ export default class MemberEventListSummary extends React.Component {
             });
         });
 
-        const aggregate = this._getAggregate(userEvents);
+        const aggregate = this.getAggregate(userEvents);
 
         // Sort types by order of lowest event index within sequence
         const orderedTransitionSequences = Object.keys(aggregate.names).sort(
-            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2],
+            (seq1, seq2) => aggregate.indices[seq1] - aggregate.indices[seq2],
         );
 
-        const EventListSummary = sdk.getComponent("views.elements.EventListSummary");
         return <EventListSummary
             events={this.props.events}
             threshold={this.props.threshold}
             onToggle={this.props.onToggle}
             startExpanded={this.props.startExpanded}
             children={this.props.children}
-            summaryMembers={avatarMembers}
-            summaryText={this._generateSummary(aggregate.names, orderedTransitionSequences)} />;
+            summaryMembers={[...latestUserAvatarMember.values()]}
+            summaryText={this.generateSummary(aggregate.names, orderedTransitionSequences)} />;
     }
 }

src/components/views/elements/MiniAvatarUploader.tsx

@@ -0,0 +1,90 @@
+/*
+Copyright 2020 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, useRef, useState} from 'react';
+import classNames from 'classnames';
+
+import AccessibleButton from "./AccessibleButton";
+import Tooltip from './Tooltip';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useTimeout} from "../../../hooks/useTimeout";
+
+export const AVATAR_SIZE = 52;
+
+interface IProps {
+    hasAvatar: boolean;
+    noAvatarLabel?: string;
+    hasAvatarLabel?: string;
+    setAvatarUrl(url: string): Promise<void>;
+}
+
+const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+    const cli = useContext(MatrixClientContext);
+    const [busy, setBusy] = useState(false);
+    const [hover, setHover] = useState(false);
+    const [show, setShow] = useState(false);
+
+    useTimeout(() => {
+        setShow(true);
+    }, 3000); // show after 3 seconds
+    useTimeout(() => {
+        setShow(false);
+    }, 13000); // hide after being shown for 10 seconds
+
+    const uploadRef = useRef<HTMLInputElement>();
+
+    const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
+
+    return <React.Fragment>
+        <input
+            type="file"
+            ref={uploadRef}
+            className="mx_MiniAvatarUploader_input"
+            onChange={async (ev) => {
+                if (!ev.target.files?.length) return;
+                setBusy(true);
+                const file = ev.target.files[0];
+                const uri = await cli.uploadContent(file);
+                await setAvatarUrl(uri);
+                setBusy(false);
+            }}
+            accept="image/*"
+        />
+
+        <AccessibleButton
+            className={classNames("mx_MiniAvatarUploader", {
+                mx_MiniAvatarUploader_busy: busy,
+                mx_MiniAvatarUploader_hasAvatar: hasAvatar,
+            })}
+            disabled={busy}
+            onClick={() => {
+                uploadRef.current.click();
+            }}
+            onMouseOver={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+        >
+            { children }
+
+            <Tooltip
+                label={label}
+                visible={!!label && (hover || show)}
+                forceOnRight
+            />
+        </AccessibleButton>
+    </React.Fragment>;
+};
+
+export default MiniAvatarUploader;

src/components/views/elements/PersistedElement.js

@@ -21,6 +21,8 @@ import {throttle} from "lodash";
 import ResizeObserver from 'resize-observer-polyfill';
 
 import dis from '../../../dispatcher/dispatcher';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -144,9 +146,11 @@ export default class PersistedElement extends React.Component {
     }
 
     renderApp() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
+        const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
+            <div ref={this.collectChild} style={this.props.style}>
+                {this.props.children}
+            </div>
+        </MatrixClientContext.Provider>;
 
         ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
     }
@@ -173,3 +177,5 @@ export default class PersistedElement extends React.Component {
         return <div ref={this.collectChildContainer} />;
     }
 }
+
+export const getPersistKey = (appId: string) => 'widget_' + appId;

src/components/views/elements/PersistentApp.js

@@ -58,6 +58,11 @@ export default class PersistentApp extends React.Component {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
             if (this.state.roomId !== persistentWidgetInRoomId) {
                 const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+
+                // Sanity check the room - the widget may have been destroyed between render cycles, and
+                // thus no room is associated anymore.
+                if (!persistentWidgetInRoom) return null;
+
                 // get the widget data
                 const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
                     return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
@@ -74,14 +79,12 @@ export default class PersistentApp extends React.Component {
                     fullWidth={true}
                     room={persistentWidgetInRoom}
                     userId={MatrixClientPeg.get().credentials.userId}
-                    show={true}
                     creatorUserId={app.creatorUserId}
-                    widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
+                    widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                     waitForIframeLoad={app.waitForIframeLoad}
                     whitelistCapabilities={capWhitelist}
-                    showDelete={false}
-                    showMinimise={false}
                     miniMode={true}
+                    showMenubar={false}
                 />;
             }
         }

src/components/views/elements/Pill.js

@@ -29,7 +29,7 @@ import {Action} from "../../../dispatcher/actions";
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
-const REGEX_LOCAL_PERMALINK = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
+const REGEX_LOCAL_PERMALINK = /^#\/(?:user|room|group)\/(([#!@+]).*?)(?=\/|\?|$)/;
 
 class Pill extends React.Component {
     static isPillUrl(url) {

src/components/views/elements/ReplyThread.js

@@ -28,6 +28,8 @@ import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
 import sanitizeHtml from "sanitize-html";
+import {UIFeature} from "../../../settings/UIFeature";
+import {PERMITTED_URL_SCHEMES} from "../../../HtmlUtils";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -61,6 +63,12 @@ export default class ReplyThread extends React.Component {
             err: false,
         };
 
+        this.unmounted = false;
+        this.context.on("Event.replaced", this.onEventReplaced);
+        this.room = this.context.getRoom(this.props.parentEv.getRoomId());
+        this.room.on("Room.redaction", this.onRoomRedaction);
+        this.room.on("Room.redactionCancelled", this.onRoomRedaction);
+
         this.onQuoteClick = this.onQuoteClick.bind(this);
         this.canCollapse = this.canCollapse.bind(this);
         this.collapse = this.collapse.bind(this);
@@ -105,6 +113,9 @@ export default class ReplyThread extends React.Component {
             {
                 allowedTags: false, // false means allow everything
                 allowedAttributes: false,
+                // we somehow can't allow all schemes, so we allow all that we
+                // know of and mxc (for img tags)
+                allowedSchemes: [...PERMITTED_URL_SCHEMES, 'mxc'],
                 exclusiveFilter: (frame) => frame.tag === "mx-reply",
             },
         );
@@ -212,11 +223,6 @@ export default class ReplyThread extends React.Component {
     }
 
     componentDidMount() {
-        this.unmounted = false;
-        this.room = this.context.getRoom(this.props.parentEv.getRoomId());
-        this.room.on("Room.redaction", this.onRoomRedaction);
-        // same event handler as Room.redaction as for both we just do forceUpdate
-        this.room.on("Room.redactionCancelled", this.onRoomRedaction);
         this.initialize();
     }
 
@@ -226,21 +232,36 @@ export default class ReplyThread extends React.Component {
 
     componentWillUnmount() {
         this.unmounted = true;
+        this.context.removeListener("Event.replaced", this.onEventReplaced);
         if (this.room) {
             this.room.removeListener("Room.redaction", this.onRoomRedaction);
             this.room.removeListener("Room.redactionCancelled", this.onRoomRedaction);
         }
     }
 
-    onRoomRedaction = (ev, room) => {
-        if (this.unmounted) return;
-
-        // If one of the events we are rendering gets redacted, force a re-render
-        if (this.state.events.some(event => event.getId() === ev.getId())) {
+    updateForEventId = (eventId) => {
+        if (this.state.events.some(event => event.getId() === eventId)) {
             this.forceUpdate();
         }
     };
 
+    onEventReplaced = (ev) => {
+        if (this.unmounted) return;
+
+        // If one of the events we are rendering gets replaced, force a re-render
+        this.updateForEventId(ev.getId());
+    };
+
+    onRoomRedaction = (ev) => {
+        if (this.unmounted) return;
+
+        const eventId = ev.getAssociatedId();
+        if (!eventId) return;
+
+        // If one of the events we are rendering gets redacted, force a re-render
+        this.updateForEventId(eventId);
+    };
+
     async initialize() {
         const {parentEv} = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId
@@ -366,6 +387,8 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     useIRCLayout={this.props.useIRCLayout}
+                    enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                    replacingEventId={ev.replacingEventId()}
                 />
             </blockquote>;
         });

src/components/views/elements/TagTile.js

@@ -26,12 +26,12 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
-import TagOrderStore from '../../../stores/TagOrderStore';
+import GroupFilterOrderStore from '../../../stores/GroupFilterOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "./AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 
-// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
+// A class for a child of GroupFilterPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
@@ -142,7 +142,7 @@ export default class TagTile extends React.Component {
             mx_TagTile_selected_prototype: this.props.selected && isPrototype,
         });
 
-        const badge = TagOrderStore.getGroupBadge(this.props.tag);
+        const badge = GroupFilterOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
         if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({

src/components/views/elements/Tooltip.tsx

@@ -36,6 +36,7 @@ interface IProps {
         // the react element to put into the tooltip
         label: React.ReactNode;
         forceOnRight?: boolean;
+        yOffset?: number;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -46,6 +47,7 @@ export default class Tooltip extends React.Component<IProps> {
 
     public static readonly defaultProps = {
         visible: true,
+        yOffset: 0,
     };
 
     // Create a wrapper for the tooltip outside the parent and attach it to the body element
@@ -82,9 +84,9 @@ export default class Tooltip extends React.Component<IProps> {
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
 
-        style.top = (parentBox.top - 2) + window.pageYOffset + offset;
+        style.top = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset + offset;
         if (!this.props.forceOnRight && parentBox.right > window.innerWidth / 2) {
-            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 8;
+            style.right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
         } else {
             style.left = parentBox.right + window.pageXOffset + 6;
         }

src/components/views/elements/UserTagTile.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import * as fbEmitter from "fbemitter";
-import TagOrderStore from "../../../stores/TagOrderStore";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import classNames from "classnames";
 import { _t } from "../../../languageHandler";
@@ -36,12 +36,12 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            selected: TagOrderStore.getSelectedTags().length === 0,
+            selected: GroupFilterOrderStore.getSelectedTags().length === 0,
         };
     }
 
     public componentDidMount() {
-        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+        this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
     }
 
     public componentWillUnmount() {
@@ -49,7 +49,7 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
     }
 
     private onTagStoreUpdate = () => {
-        const selected = TagOrderStore.getSelectedTags().length === 0;
+        const selected = GroupFilterOrderStore.getSelectedTags().length === 0;
         this.setState({selected});
     };
 

src/components/views/elements/Validation.tsx

@@ -21,18 +21,20 @@ import classNames from "classnames";
 
 type Data = Pick<IFieldState, "value" | "allowEmpty">;
 
-interface IRule<T> {
+interface IRule<T, D = void> {
     key: string;
     final?: boolean;
-    skip?(this: T, data: Data): boolean;
-    test(this: T, data: Data): boolean | Promise<boolean>;
-    valid?(this: T): string;
-    invalid?(this: T): string;
+    skip?(this: T, data: Data, derivedData: D): boolean;
+    test(this: T, data: Data, derivedData: D): boolean | Promise<boolean>;
+    valid?(this: T, derivedData: D): string;
+    invalid?(this: T, derivedData: D): string;
 }
 
-interface IArgs<T> {
-    rules: IRule<T>[];
-    description(this: T): React.ReactChild;
+interface IArgs<T, D = void> {
+    rules: IRule<T, D>[];
+    description(this: T, derivedData: D): React.ReactChild;
+    hideDescriptionIfValid?: boolean;
+    deriveData?(data: Data): Promise<D>;
 }
 
 export interface IFieldState {
@@ -53,6 +55,12 @@ export interface IValidationResult {
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
  *     meet the validation rules. Shown at the top of the validation feedback.
+ * @param {Boolean} hideDescriptionIfValid
+ *     If true, don't show the description if the validation passes validation.
+ * @param {Function} deriveData
+ *     Optional function that returns a Promise to an object of generic type D.
+ *     The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
+ *     Useful for doing calculations per-value update once rather than in each of the above rule methods.
  * @param {Object} rules
  *     An array of rules describing how to check to input value. Each rule in an object
  *     and may have the following properties:
@@ -66,7 +74,9 @@ export interface IValidationResult {
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
-export default function withValidation<T = undefined>({ description, rules }: IArgs<T>) {
+export default function withValidation<T = undefined, D = void>({
+    description, hideDescriptionIfValid, deriveData, rules,
+}: IArgs<T, D>) {
     return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
@@ -75,6 +85,9 @@ export default function withValidation<T = undefined>({ description, rules }: IA
             };
         }
 
+        const data = { value, allowEmpty };
+        const derivedData = deriveData ? await deriveData(data) : undefined;
+
         const results = [];
         let valid = true;
         if (rules && rules.length) {
@@ -87,20 +100,18 @@ export default function withValidation<T = undefined>({ description, rules }: IA
                     continue;
                 }
 
-                const data = { value, allowEmpty };
-
-                if (rule.skip && rule.skip.call(this, data)) {
+                if (rule.skip && rule.skip.call(this, data, derivedData)) {
                     continue;
                 }
 
                 // We're setting `this` to whichever component holds the validation
                 // function. That allows rules to access the state of the component.
-                const ruleValid = await rule.test.call(this, data);
+                const ruleValid = await rule.test.call(this, data, derivedData);
                 valid = valid && ruleValid;
                 if (ruleValid && rule.valid) {
                     // If the rule's result is valid and has text to show for
                     // the valid state, show it.
-                    const text = rule.valid.call(this);
+                    const text = rule.valid.call(this, derivedData);
                     if (!text) {
                         continue;
                     }
@@ -112,7 +123,7 @@ export default function withValidation<T = undefined>({ description, rules }: IA
                 } else if (!ruleValid && rule.invalid) {
                     // If the rule's result is invalid and has text to show for
                     // the invalid state, show it.
-                    const text = rule.invalid.call(this);
+                    const text = rule.invalid.call(this, derivedData);
                     if (!text) {
                         continue;
                     }
@@ -150,10 +161,10 @@ export default function withValidation<T = undefined>({ description, rules }: IA
         }
 
         let summary;
-        if (description) {
+        if (description && (details || !hideDescriptionIfValid)) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
-            const content = description.call(this);
+            const content = description.call(this, derivedData);
             summary = <div className="mx_Validation_description">{content}</div>;
         }
 

src/components/views/emojipicker/Category.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,32 +15,53 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {RefObject} from 'react';
+
 import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker";
-import * as sdk from '../../../index';
+import LazyRenderList from "../elements/LazyRenderList";
+import {DATA_BY_CATEGORY, IEmoji} from "../../../emoji";
+import Emoji from './Emoji';
 
 const OVERFLOW_ROWS = 3;
 
-class Category extends React.PureComponent {
-    static propTypes = {
-        emojis: PropTypes.arrayOf(PropTypes.object).isRequired,
-        name: PropTypes.string.isRequired,
-        id: PropTypes.string.isRequired,
-        onMouseEnter: PropTypes.func.isRequired,
-        onMouseLeave: PropTypes.func.isRequired,
-        onClick: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+export type CategoryKey = (keyof typeof DATA_BY_CATEGORY) | "recent";
 
-    _renderEmojiRow = (rowIndex) => {
+export interface ICategory {
+    id: CategoryKey;
+    name: string;
+    enabled: boolean;
+    visible: boolean;
+    ref: RefObject<HTMLButtonElement>;
+}
+
+interface IProps {
+    id: string;
+    name: string;
+    emojis: IEmoji[];
+    selectedEmojis: Set<string>;
+    heightBefore: number;
+    viewportHeight: number;
+    scrollTop: number;
+    onClick(emoji: IEmoji): void;
+    onMouseEnter(emoji: IEmoji): void;
+    onMouseLeave(emoji: IEmoji): void;
+}
+
+class Category extends React.PureComponent<IProps> {
+    private renderEmojiRow = (rowIndex: number) => {
         const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;
         const emojisForRow = emojis.slice(rowIndex * 8, (rowIndex + 1) * 8);
-        const Emoji = sdk.getComponent("emojipicker.Emoji");
         return (<div key={rowIndex}>{
-            emojisForRow.map(emoji =>
-                <Emoji key={emoji.hexcode} emoji={emoji} selectedEmojis={selectedEmojis}
-                    onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />)
+            emojisForRow.map(emoji => ((
+                <Emoji
+                    key={emoji.hexcode}
+                    emoji={emoji}
+                    selectedEmojis={selectedEmojis}
+                    onClick={onClick}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                />
+            )))
         }</div>);
     };
 
@@ -52,7 +74,6 @@ class Category extends React.PureComponent {
         for (let counter = 0; counter < rows.length; ++counter) {
             rows[counter] = counter;
         }
-        const LazyRenderList = sdk.getComponent('elements.LazyRenderList');
 
         const viewportTop = scrollTop;
         const viewportBottom = viewportTop + viewportHeight;
@@ -84,7 +105,7 @@ class Category extends React.PureComponent {
                     height={localHeight}
                     overflowItems={OVERFLOW_ROWS}
                     overflowMargin={0}
-                    renderItem={this._renderEmojiRow}>
+                    renderItem={this.renderEmojiRow}>
                 </LazyRenderList>
             </section>
         );

src/components/views/emojipicker/Emoji.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,18 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import {MenuItem} from "../../structures/ContextMenu";
+import {IEmoji} from "../../../emoji";
 
-class Emoji extends React.PureComponent {
-    static propTypes = {
-        onClick: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-        emoji: PropTypes.object.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+interface IProps {
+    emoji: IEmoji;
+    selectedEmojis?: Set<string>;
+    onClick(emoji: IEmoji): void;
+    onMouseEnter(emoji: IEmoji): void;
+    onMouseLeave(emoji: IEmoji): void;
+}
 
+class Emoji extends React.PureComponent<IProps> {
     render() {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
         const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);

src/components/views/emojipicker/EmojiPicker.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,25 +16,43 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-
 import * as recent from '../../../emojipicker/recent';
-import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
+import {DATA_BY_CATEGORY, getEmojiFromUnicode, IEmoji} from "../../../emoji";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import Header from "./Header";
+import Search from "./Search";
+import Preview from "./Preview";
+import QuickReactions from "./QuickReactions";
+import Category, {ICategory, CategoryKey} from "./Category";
 
 export const CATEGORY_HEADER_HEIGHT = 22;
 export const EMOJI_HEIGHT = 37;
 export const EMOJIS_PER_ROW = 8;
 
-class EmojiPicker extends React.Component {
-    static propTypes = {
-        onChoose: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-        showQuickReactions: PropTypes.bool,
-    };
+interface IProps {
+    selectedEmojis: Set<string>;
+    showQuickReactions?: boolean;
+    onChoose(unicode: string): boolean;
+}
+
+interface IState {
+    filter: string;
+    previewEmoji?: IEmoji;
+    scrollTop: number;
+    // initial estimation of height, dialog is hardcoded to 450px height.
+    // should be enough to never have blank rows of emojis as
+    // 3 rows of overflow are also rendered. The actual value is updated on scroll.
+    viewportHeight: number;
+}
+
+class EmojiPicker extends React.Component<IProps, IState> {
+    private readonly recentlyUsed: IEmoji[];
+    private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
+    private readonly categories: ICategory[];
+
+    private bodyRef = React.createRef<HTMLDivElement>();
 
     constructor(props) {
         super(props);
@@ -42,9 +61,6 @@ class EmojiPicker extends React.Component {
             filter: "",
             previewEmoji: null,
             scrollTop: 0,
-            // initial estimation of height, dialog is hardcoded to 450px height.
-            // should be enough to never have blank rows of emojis as
-            // 3 rows of overflow are also rendered. The actual value is updated on scroll.
             viewportHeight: 280,
         };
 
@@ -110,18 +126,9 @@ class EmojiPicker extends React.Component {
             visible: false,
             ref: React.createRef(),
         }];
-
-        this.bodyRef = React.createRef();
-
-        this.onChangeFilter = this.onChangeFilter.bind(this);
-        this.onHoverEmoji = this.onHoverEmoji.bind(this);
-        this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this);
-        this.onClickEmoji = this.onClickEmoji.bind(this);
-        this.scrollToCategory = this.scrollToCategory.bind(this);
-        this.updateVisibility = this.updateVisibility.bind(this);
     }
 
-    onScroll = () => {
+    private onScroll = () => {
         const body = this.bodyRef.current;
         this.setState({
             scrollTop: body.scrollTop,
@@ -130,7 +137,7 @@ class EmojiPicker extends React.Component {
         this.updateVisibility();
     };
 
-    updateVisibility() {
+    private updateVisibility = () => {
         const body = this.bodyRef.current;
         const rect = body.getBoundingClientRect();
         for (const cat of this.categories) {
@@ -147,21 +154,21 @@ class EmojiPicker extends React.Component {
             // We update this here instead of through React to avoid re-render on scroll.
             if (cat.visible) {
                 cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", true);
-                cat.ref.current.setAttribute("tabindex", 0);
+                cat.ref.current.setAttribute("aria-selected", "true");
+                cat.ref.current.setAttribute("tabindex", "0");
             } else {
                 cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", false);
-                cat.ref.current.setAttribute("tabindex", -1);
+                cat.ref.current.setAttribute("aria-selected", "false");
+                cat.ref.current.setAttribute("tabindex", "-1");
             }
         }
-    }
+    };
 
-    scrollToCategory(category) {
+    private scrollToCategory = (category: string) => {
         this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
-    }
+    };
 
-    onChangeFilter(filter) {
+    private onChangeFilter = (filter: string) => {
         filter = filter.toLowerCase(); // filter is case insensitive stored lower-case
         for (const cat of this.categories) {
             let emojis;
@@ -181,27 +188,34 @@ class EmojiPicker extends React.Component {
         // Header underlines need to be updated, but updating requires knowing
         // where the categories are, so we wait for a tick.
         setTimeout(this.updateVisibility, 0);
-    }
+    };
 
-    onHoverEmoji(emoji) {
+    private onEnterFilter = () => {
+        const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");
+        if (btn) {
+            btn.click();
+        }
+    };
+
+    private onHoverEmoji = (emoji: IEmoji) => {
         this.setState({
             previewEmoji: emoji,
         });
-    }
+    };
 
-    onHoverEmojiEnd(emoji) {
+    private onHoverEmojiEnd = (emoji: IEmoji) => {
         this.setState({
             previewEmoji: null,
         });
-    }
+    };
 
-    onClickEmoji(emoji) {
+    private onClickEmoji = (emoji: IEmoji) => {
         if (this.props.onChoose(emoji.unicode) !== false) {
             recent.add(emoji.unicode);
         }
-    }
+    };
 
-    _categoryHeightForEmojiCount(count) {
+    private static categoryHeightForEmojiCount(count: number) {
         if (count === 0) {
             return 0;
         }
@@ -209,25 +223,37 @@ class EmojiPicker extends React.Component {
     }
 
     render() {
-        const Header = sdk.getComponent("emojipicker.Header");
-        const Search = sdk.getComponent("emojipicker.Search");
-        const Category = sdk.getComponent("emojipicker.Category");
-        const Preview = sdk.getComponent("emojipicker.Preview");
-        const QuickReactions = sdk.getComponent("emojipicker.QuickReactions");
         let heightBefore = 0;
         return (
             <div className="mx_EmojiPicker">
-                <Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} />
-                <Search query={this.state.filter} onChange={this.onChangeFilter} />
-                <AutoHideScrollbar className="mx_EmojiPicker_body" wrappedRef={e => this.bodyRef.current = e} onScroll={this.onScroll}>
+                <Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
+                <Search query={this.state.filter} onChange={this.onChangeFilter} onEnter={this.onEnterFilter} />
+                <AutoHideScrollbar
+                    className="mx_EmojiPicker_body"
+                    wrappedRef={ref => {
+                        // @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
+                        this.bodyRef.current = ref
+                    }}
+                    onScroll={this.onScroll}
+                >
                     {this.categories.map(category => {
                         const emojis = this.memoizedDataByCategory[category.id];
-                        const categoryElement = (<Category key={category.id} id={category.id} name={category.name}
-                            heightBefore={heightBefore} viewportHeight={this.state.viewportHeight}
-                            scrollTop={this.state.scrollTop} emojis={emojis} onClick={this.onClickEmoji}
-                            onMouseEnter={this.onHoverEmoji} onMouseLeave={this.onHoverEmojiEnd}
-                            selectedEmojis={this.props.selectedEmojis} />);
-                        const height = this._categoryHeightForEmojiCount(emojis.length);
+                        const categoryElement = ((
+                            <Category
+                                key={category.id}
+                                id={category.id}
+                                name={category.name}
+                                heightBefore={heightBefore}
+                                viewportHeight={this.state.viewportHeight}
+                                scrollTop={this.state.scrollTop}
+                                emojis={emojis}
+                                onClick={this.onClickEmoji}
+                                onMouseEnter={this.onHoverEmoji}
+                                onMouseLeave={this.onHoverEmojiEnd}
+                                selectedEmojis={this.props.selectedEmojis}
+                            />
+                        ));
+                        const height = EmojiPicker.categoryHeightForEmojiCount(emojis.length);
                         heightBefore += height;
                         return categoryElement;
                     })}

src/components/views/emojipicker/Header.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,19 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from "classnames";
 
 import {_t} from "../../../languageHandler";
 import {Key} from "../../../Keyboard";
+import {CategoryKey, ICategory} from "./Category";
 
-class Header extends React.PureComponent {
-    static propTypes = {
-        categories: PropTypes.arrayOf(PropTypes.object).isRequired,
-        onAnchorClick: PropTypes.func.isRequired,
-    };
+interface IProps {
+    categories: ICategory[];
+    onAnchorClick(id: CategoryKey): void
+}
 
-    findNearestEnabled(index, delta) {
+class Header extends React.PureComponent<IProps> {
+    private findNearestEnabled(index: number, delta: number) {
         index += this.props.categories.length;
         const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
 
@@ -37,12 +38,12 @@ class Header extends React.PureComponent {
         }
     }
 
-    changeCategoryRelative(delta) {
+    private changeCategoryRelative(delta: number) {
         const current = this.props.categories.findIndex(c => c.visible);
         this.changeCategoryAbsolute(current + delta, delta);
     }
 
-    changeCategoryAbsolute(index, delta=1) {
+    private changeCategoryAbsolute(index: number, delta=1) {
         const category = this.props.categories[this.findNearestEnabled(index, delta)];
         if (category) {
             this.props.onAnchorClick(category.id);
@@ -52,7 +53,7 @@ class Header extends React.PureComponent {
 
     // Implements ARIA Tabs with Automatic Activation pattern
     // https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
-    onKeyDown = (ev) => {
+    private onKeyDown = (ev: React.KeyboardEvent) => {
         let handled = true;
         switch (ev.key) {
             case Key.ARROW_LEFT:
@@ -80,7 +81,12 @@ class Header extends React.PureComponent {
 
     render() {
         return (
-            <nav className="mx_EmojiPicker_header" role="tablist" aria-label={_t("Categories")} onKeyDown={this.onKeyDown}>
+            <nav
+                className="mx_EmojiPicker_header"
+                role="tablist"
+                aria-label={_t("Categories")}
+                onKeyDown={this.onKeyDown}
+            >
                 {this.props.categories.map(category => {
                     const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
                         mx_EmojiPicker_anchor_visible: category.visible,

src/components/views/emojipicker/Preview.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,19 +16,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class Preview extends React.PureComponent {
-    static propTypes = {
-        emoji: PropTypes.object,
-    };
+import {IEmoji} from "../../../emoji";
 
+interface IProps {
+    emoji: IEmoji;
+}
+
+class Preview extends React.PureComponent<IProps> {
     render() {
         const {
             unicode = "",
             annotation = "",
             shortcodes: [shortcode = ""],
         } = this.props.emoji || {};
+
         return (
             <div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
                 <div className="mx_EmojiPicker_preview_emoji">

src/components/views/emojipicker/QuickReactions.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,11 +16,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {getEmojiFromUnicode} from "../../../emoji";
+import {getEmojiFromUnicode, IEmoji} from "../../../emoji";
+import Emoji from "./Emoji";
 
 // We use the variation-selector Heart in Quick Reactions for some reason
 const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
@@ -30,36 +30,36 @@ const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀
     return data;
 });
 
-class QuickReactions extends React.Component {
-    static propTypes = {
-        onClick: PropTypes.func.isRequired,
-        selectedEmojis: PropTypes.instanceOf(Set),
-    };
+interface IProps {
+    selectedEmojis?: Set<string>;
+    onClick(emoji: IEmoji): void;
+}
 
+interface IState {
+    hover?: IEmoji;
+}
+
+class QuickReactions extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
             hover: null,
         };
-        this.onMouseEnter = this.onMouseEnter.bind(this);
-        this.onMouseLeave = this.onMouseLeave.bind(this);
     }
 
-    onMouseEnter(emoji) {
+    private onMouseEnter = (emoji: IEmoji) => {
         this.setState({
             hover: emoji,
         });
-    }
+    };
 
-    onMouseLeave() {
+    private onMouseLeave = () => {
         this.setState({
             hover: null,
         });
-    }
+    };
 
     render() {
-        const Emoji = sdk.getComponent("emojipicker.Emoji");
-
         return (
             <section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
                 <h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
@@ -72,10 +72,16 @@ class QuickReactions extends React.Component {
                     }
                 </h2>
                 <ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
-                    {QUICK_REACTIONS.map(emoji => <Emoji
-                        key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
-                        onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                        selectedEmojis={this.props.selectedEmojis} />)}
+                    {QUICK_REACTIONS.map(emoji => ((
+                        <Emoji
+                            key={emoji.hexcode}
+                            emoji={emoji}
+                            onClick={this.props.onClick}
+                            onMouseEnter={this.onMouseEnter}
+                            onMouseLeave={this.onMouseLeave}
+                            selectedEmojis={this.props.selectedEmojis}
+                        />
+                    )))}
                 </ul>
             </section>
         );

src/components/views/emojipicker/ReactionPicker.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,26 +16,29 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from "prop-types";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
 import EmojiPicker from "./EmojiPicker";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 
-class ReactionPicker extends React.Component {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-        reactions: PropTypes.object,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+    reactions: any; // TODO type this once js-sdk is more typescripted
+    onFinished(): void;
+}
 
+interface IState {
+    selectedEmojis: Set<string>;
+}
+
+class ReactionPicker extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
         this.state = {
             selectedEmojis: new Set(Object.keys(this.getReactions())),
         };
-        this.onChoose = this.onChoose.bind(this);
-        this.onReactionsChange = this.onReactionsChange.bind(this);
         this.addListeners();
     }
 
@@ -45,7 +49,7 @@ class ReactionPicker extends React.Component {
         }
     }
 
-    addListeners() {
+    private addListeners() {
         if (this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
             this.props.reactions.on("Relations.remove", this.onReactionsChange);
@@ -55,22 +59,13 @@ class ReactionPicker extends React.Component {
 
     componentWillUnmount() {
         if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
+            this.props.reactions.removeListener("Relations.add", this.onReactionsChange);
+            this.props.reactions.removeListener("Relations.remove", this.onReactionsChange);
+            this.props.reactions.removeListener("Relations.redaction", this.onReactionsChange);
         }
     }
 
-    getReactions() {
+    private getReactions() {
         if (!this.props.reactions) {
             return {};
         }
@@ -81,13 +76,13 @@ class ReactionPicker extends React.Component {
             .map(event => [event.getRelation().key, event.getId()]));
     }
 
-    onReactionsChange() {
+    private onReactionsChange = () => {
         this.setState({
             selectedEmojis: new Set(Object.keys(this.getReactions())),
         });
-    }
+    };
 
-    onChoose(reaction) {
+    onChoose = (reaction: string) => {
         this.componentWillUnmount();
         this.props.onFinished();
         const myReactions = this.getReactions();
@@ -109,7 +104,7 @@ class ReactionPicker extends React.Component {
             dis.dispatch({action: "message_sent"});
             return true;
         }
-    }
+    };
 
     render() {
         return <EmojiPicker

src/components/views/emojipicker/Search.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Tulir Asokan <tulir@maunium.net>
+Copyright 2020 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,32 +16,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { _t } from '../../../languageHandler';
+import {Key} from "../../../Keyboard";
 
-class Search extends React.PureComponent {
-    static propTypes = {
-        query: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
-    };
+interface IProps {
+    query: string;
+    onChange(value: string): void;
+    onEnter(): void;
+}
 
-    constructor(props) {
-        super(props);
-        this.inputRef = React.createRef();
-    }
+class Search extends React.PureComponent<IProps> {
+    private inputRef = React.createRef<HTMLInputElement>();
 
     componentDidMount() {
         // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout
         setTimeout(() => this.inputRef.current.focus(), 0);
     }
 
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.ENTER) {
+            this.props.onEnter();
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
     render() {
         let rightButton;
         if (this.props.query) {
             rightButton = (
-                <button onClick={() => this.props.onChange("")}
-                        className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
-                        title={_t("Cancel search")} />
+                <button
+                    onClick={() => this.props.onChange("")}
+                    className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
+                    title={_t("Cancel search")}
+                />
             );
         } else {
             rightButton = <span className="mx_EmojiPicker_search_icon" />;
@@ -48,8 +58,15 @@ class Search extends React.PureComponent {
 
         return (
             <div className="mx_EmojiPicker_search">
-                <input autoFocus type="text" placeholder="Search" value={this.props.query}
-                    onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} />
+                <input
+                    autoFocus
+                    type="text"
+                    placeholder="Search"
+                    value={this.props.query}
+                    onChange={ev => this.props.onChange(ev.target.value)}
+                    onKeyDown={this.onKeyDown}
+                    ref={this.inputRef}
+                />
                 {rightButton}
             </div>
         );

src/components/views/messages/EncryptionEvent.js

@@ -1,58 +0,0 @@
-/*
-Copyright 2020 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 PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
-
-export default class EncryptionEvent extends React.Component {
-    render() {
-        const {mxEvent} = this.props;
-
-        let body;
-        let classes = "mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon";
-        if (
-            mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' &&
-            MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId())
-        ) {
-            body = <div>
-                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
-                <div className="mx_cryptoEvent_subtitle">
-                    {_t(
-                        "Messages in this room are end-to-end encrypted. " +
-                        "Learn more & verify this user in their user profile.",
-                    )}
-                </div>
-            </div>;
-        } else {
-            body = <div>
-                <div className="mx_cryptoEvent_title">{_t("Encryption not enabled")}</div>
-                <div className="mx_cryptoEvent_subtitle">{_t("The encryption used by this room isn't supported.")}</div>
-            </div>;
-            classes += " mx_cryptoEvent_icon_warning";
-        }
-
-        return (<div className={classes}>
-            {body}
-        </div>);
-    }
-}
-
-EncryptionEvent.propTypes = {
-    /* the MatrixEvent to show */
-    mxEvent: PropTypes.object.isRequired,
-};

src/components/views/messages/EncryptionEvent.tsx

@@ -0,0 +1,68 @@
+/*
+Copyright 2020 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, {forwardRef, useContext} from 'react';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import EventTileBubble from "./EventTileBubble";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import DMRoomMap from "../../../utils/DMRoomMap";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({mxEvent}, ref) => {
+    const cli = useContext(MatrixClientContext);
+    const roomId = mxEvent.getRoomId();
+    const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
+
+    if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) {
+        let subtitle: string;
+        const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+        if (dmPartner) {
+            const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner;
+            subtitle = _t("Messages here are end-to-end encrypted. " +
+                "Verify %(displayName)s in their profile - tap on their avatar.", { displayName });
+        } else {
+            subtitle = _t("Messages in this room are end-to-end encrypted. " +
+                "When people join, you can verify them in their profile, just tap on their avatar.");
+        }
+
+        return <EventTileBubble
+            className="mx_cryptoEvent mx_cryptoEvent_icon"
+            title={_t("Encryption enabled")}
+            subtitle={subtitle}
+        />;
+    } else if (isRoomEncrypted) {
+        return <EventTileBubble
+            className="mx_cryptoEvent mx_cryptoEvent_icon"
+            title={_t("Encryption enabled")}
+            subtitle={_t("Ignored attempt to disable encryption")}
+        />;
+    }
+
+    return <EventTileBubble
+        className="mx_cryptoEvent mx_cryptoEvent_icon mx_cryptoEvent_icon_warning"
+        title={_t("Encryption not enabled")}
+        subtitle={_t("The encryption used by this room isn't supported.")}
+        ref={ref}
+    />;
+});
+
+export default EncryptionEvent;

src/components/views/messages/EventTileBubble.tsx

@@ -0,0 +1,34 @@
+/*
+Copyright 2020 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, {forwardRef, ReactNode} from "react";
+import classNames from "classnames";
+
+interface IProps {
+    className: string;
+    title: string;
+    subtitle?: ReactNode;
+}
+
+const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({ className, title, subtitle, children }, ref) => {
+    return <div className={classNames("mx_EventTileBubble", className)} ref={ref}>
+        <div className="mx_EventTileBubble_title">{ title }</div>
+        { subtitle && <div className="mx_EventTileBubble_subtitle">{ subtitle }</div> }
+        { children }
+    </div>;
+});
+
+export default EventTileBubble;

src/components/views/messages/MFileBody.js

@@ -144,7 +144,7 @@ export default class MFileBody extends React.Component {
      * Extracts a human readable label for the file attachment to use as
      * link text.
      *
-     * @params {Object} content The "content" key of the matrix event.
+     * @param {Object} content The "content" key of the matrix event.
      * @return {string} the human readable link text for the attachment.
      */
     presentableTextForFile(content) {

src/components/views/messages/MImageBody.js

@@ -85,6 +85,7 @@ export default class MImageBody extends React.Component {
     showImage() {
         localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
         this.setState({showImage: true});
+        this._downloadImage();
     }
 
     onClick(ev) {
@@ -253,10 +254,7 @@ export default class MImageBody extends React.Component {
         }
     }
 
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-
+    _downloadImage() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -289,9 +287,18 @@ export default class MImageBody extends React.Component {
                 });
             });
         }
+    }
 
-        // Remember that the user wanted to show this particular image
-        if (!this.state.showImage && localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true") {
+    componentDidMount() {
+        this.unmounted = false;
+        this.context.on('sync', this.onClientSync);
+
+        const showImage = this.state.showImage ||
+            localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true";
+
+        if (showImage) {
+            // Don't download anything becaue we don't want to display anything.
+            this._downloadImage();
             this.setState({showImage: true});
         }
 

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2020 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 { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import WidgetStore from "../../../stores/WidgetStore";
+import EventTileBubble from "./EventTileBubble";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const url = this.props.mxEvent.getContent()['url'];
+        const prevUrl = this.props.mxEvent.getPrevContent()['url'];
+        const senderName = this.props.mxEvent.sender?.name || this.props.mxEvent.getSender();
+
+        let joinCopy = _t('Join the conference at the top of this room');
+        if (!WidgetStore.instance.isPinned(this.props.mxEvent.getStateKey())) {
+            joinCopy = _t('Join the conference from the room information card on the right');
+        }
+
+        if (!url) {
+            // removed
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t('Video conference ended by %(senderName)s', {senderName})}
+            />;
+        } else if (prevUrl) {
+            // modified
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t('Video conference updated by %(senderName)s', {senderName})}
+                subtitle={joinCopy}
+            />;
+        } else {
+            // assume added
+            return <EventTileBubble
+                className="mx_MJitsiWidgetEvent"
+                title={_t("Video conference started by %(senderName)s", {senderName})}
+                subtitle={joinCopy}
+            />;
+        }
+    }
+}

src/components/views/messages/MKeyVerificationConclusion.js

@@ -21,6 +21,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import {getNameForEventRoom, userLabelForEventRoom}
     from '../../../utils/KeyVerificationStateObserver';
+import EventTileBubble from "./EventTileBubble";
 
 export default class MKeyVerificationConclusion extends React.Component {
     constructor(props) {
@@ -115,14 +116,14 @@ export default class MKeyVerificationConclusion extends React.Component {
         }
 
         if (title) {
-            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId());
-            const classes = classNames("mx_EventTile_bubble", "mx_cryptoEvent", "mx_cryptoEvent_icon", {
+            const classes = classNames("mx_cryptoEvent mx_cryptoEvent_icon", {
                 mx_cryptoEvent_icon_verified: request.done,
             });
-            return (<div className={classes}>
-                <div className="mx_cryptoEvent_title">{title}</div>
-                <div className="mx_cryptoEvent_subtitle">{subtitle}</div>
-            </div>);
+            return <EventTileBubble
+                className={classes}
+                title={title}
+                subtitle={userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId())}
+            />;
         }
 
         return null;

src/components/views/messages/MKeyVerificationRequest.js

@@ -24,6 +24,7 @@ import {getNameForEventRoom, userLabelForEventRoom}
 import dis from "../../../dispatcher/dispatcher";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import {Action} from "../../../dispatcher/actions";
+import EventTileBubble from "./EventTileBubble";
 
 export default class MKeyVerificationRequest extends React.Component {
     constructor(props) {
@@ -146,10 +147,8 @@ export default class MKeyVerificationRequest extends React.Component {
 
         if (!request.initiatedByMe) {
             const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
-            title = (<div className="mx_cryptoEvent_title">{
-                _t("%(name)s wants to verify", {name})}</div>);
-            subtitle = (<div className="mx_cryptoEvent_subtitle">{
-                userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
+            title = _t("%(name)s wants to verify", {name});
+            subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
                     <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
@@ -157,18 +156,18 @@ export default class MKeyVerificationRequest extends React.Component {
                 </div>);
             }
         } else { // request sent by us
-            title = (<div className="mx_cryptoEvent_title">{
-                _t("You sent a verification request")}</div>);
-            subtitle = (<div className="mx_cryptoEvent_subtitle">{
-                userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}</div>);
+            title = _t("You sent a verification request");
+            subtitle = userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId());
         }
 
         if (title) {
-            return (<div className="mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon">
-                {title}
-                {subtitle}
-                {stateNode}
-            </div>);
+            return <EventTileBubble
+                className="mx_cryptoEvent mx_cryptoEvent_icon"
+                title={title}
+                subtitle={subtitle}
+            >
+                { stateNode }
+            </EventTileBubble>;
         }
         return null;
     }

src/components/views/messages/MVideoBody.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import MFileBody from './MFileBody';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { decryptFile } from '../../../utils/DecryptFile';
@@ -24,23 +23,34 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
 
-export default class MVideoBody extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
+interface IProps {
+    /* the MatrixEvent to show */
+    mxEvent: any;
+    /* called when the video has loaded */
+    onHeightChanged: () => void;
+}
 
-        /* called when the video has loaded */
-        onHeightChanged: PropTypes.func.isRequired,
-    };
+interface IState {
+    decryptedUrl: string|null,
+    decryptedThumbnailUrl: string|null,
+    decryptedBlob: Blob|null,
+    error: any|null,
+    fetchingData: boolean,
+}
 
-    state = {
-        decryptedUrl: null,
-        decryptedThumbnailUrl: null,
-        decryptedBlob: null,
-        error: null,
-    };
+export default class MVideoBody extends React.PureComponent<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            fetchingData: false,
+            decryptedUrl: null,
+            decryptedThumbnailUrl: null,
+            decryptedBlob: null,
+            error: null,
+        }
+    }
 
-    thumbScale(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+    thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
         if (!fullWidth || !fullHeight) {
             // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
             // log this because it's spammy
@@ -61,7 +71,7 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    _getContentUrl() {
+    _getContentUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedUrl;
@@ -70,7 +80,7 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    _getThumbUrl() {
+    _getThumbUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedThumbnailUrl;
@@ -81,7 +91,8 @@ export default class MVideoBody extends React.Component {
         }
     }
 
-    componentDidMount() {
+    async componentDidMount() {
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
@@ -92,26 +103,33 @@ export default class MVideoBody extends React.Component {
                     return URL.createObjectURL(blob);
                 });
             }
-            let decryptedBlob;
-            thumbnailPromise.then((thumbnailUrl) => {
-                return decryptFile(content.file).then(function(blob) {
-                    decryptedBlob = blob;
-                    return URL.createObjectURL(blob);
-                }).then((contentUrl) => {
+            try {
+                const thumbnailUrl = await thumbnailPromise;
+                if (autoplay) {
+                    console.log("Preloading video");
+                    const decryptedBlob = await decryptFile(content.file);
+                    const contentUrl = URL.createObjectURL(decryptedBlob);
                     this.setState({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
                     this.props.onHeightChanged();
-                });
-            }).catch((err) => {
+                } else {
+                    console.log("NOT preloading video");
+                    this.setState({
+                        decryptedUrl: null,
+                        decryptedThumbnailUrl: thumbnailUrl,
+                        decryptedBlob: null,
+                    });
+                }
+            } catch (err) {
                 console.warn("Unable to decrypt attachment: ", err);
                 // Set a placeholder image when we can't decrypt the image.
                 this.setState({
                     error: err,
                 });
-            });
+            }
         }
     }
 
@@ -124,8 +142,35 @@ export default class MVideoBody extends React.Component {
         }
     }
 
+    async _videoOnPlay() {
+        if (this._getContentUrl() || this.state.fetchingData || this.state.error) {
+            // We have the file, we are fetching the file, or there is an error.
+            return;
+        }
+        this.setState({
+            // To stop subsequent download attempts
+            fetchingData: true,
+        });
+        const content = this.props.mxEvent.getContent();
+        if (!content.file) {
+            this.setState({
+                error: "No file given in content",
+            });
+            return;
+        }
+        const decryptedBlob = await decryptFile(content.file);
+        const contentUrl = URL.createObjectURL(decryptedBlob);
+        this.setState({
+            decryptedUrl: contentUrl,
+            decryptedBlob: decryptedBlob,
+            fetchingData: false,
+        });
+        this.props.onHeightChanged();
+    }
+
     render() {
         const content = this.props.mxEvent.getContent();
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
 
         if (this.state.error !== null) {
             return (
@@ -136,7 +181,8 @@ export default class MVideoBody extends React.Component {
             );
         }
 
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
+        // Important: If we aren't autoplaying and we haven't decrypred it yet, show a video with a poster.
+        if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
@@ -151,7 +197,6 @@ export default class MVideoBody extends React.Component {
 
         const contentUrl = this._getContentUrl();
         const thumbUrl = this._getThumbUrl();
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
         let height = null;
         let width = null;
         let poster = null;
@@ -170,9 +215,9 @@ export default class MVideoBody extends React.Component {
         }
         return (
             <span className="mx_MVideoBody">
-                <video className="mx_MVideoBody" src={contentUrl} alt={content.body}
+                <video className="mx_MVideoBody" src={contentUrl} title={content.body}
                     controls preload={preload} muted={autoplay} autoPlay={autoplay}
-                    height={height} width={width} poster={poster}>
+                    height={height} width={width} poster={poster} onPlay={this._videoOnPlay.bind(this)}>
                 </video>
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
             </span>

src/components/views/messages/RoomCreate.js

@@ -22,6 +22,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import EventTileBubble from "./EventTileBubble";
 
 export default class RoomCreate extends React.Component {
     static propTypes = {
@@ -45,23 +46,22 @@ export default class RoomCreate extends React.Component {
     render() {
         const predecessor = this.props.mxEvent.getContent()['predecessor'];
         if (predecessor === undefined) {
-            return <div />; // We should never have been instaniated in this case
+            return <div />; // We should never have been instantiated in this case
         }
         const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
         const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);
         permalinkCreator.load();
         const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
-        return <div className="mx_CreateEvent">
-            <div className="mx_CreateEvent_image" />
-            <div className="mx_CreateEvent_header">
-                {_t("This room is a continuation of another conversation.")}
-            </div>
-            <a className="mx_CreateEvent_link"
-                href={predecessorPermalink}
-                onClick={this._onLinkClicked}
-            >
+        const link = (
+            <a href={predecessorPermalink} onClick={this._onLinkClicked}>
                 {_t("Click here to see older messages.")}
             </a>
-        </div>;
+        );
+
+        return <EventTileBubble
+            className="mx_CreateEvent"
+            title={_t("This room is a continuation of another conversation.")}
+            subtitle={link}
+        />;
     }
 }

src/components/views/messages/TextualBody.js

@@ -401,7 +401,8 @@ export default class TextualBody extends React.Component {
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
-        const stripReply = ReplyThread.getParentEventId(mxEvent);
+        // only strip reply if this is the original replying event, edits thereafter do not have the fallback
+        const stripReply = !mxEvent.replacingEvent() && ReplyThread.getParentEventId(mxEvent);
         let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
             disableBigEmoji: content.msgtype === "m.emote" || !SettingsStore.getValue('TextualBody.enableBigEmoji'),
             // Part of Replies fallback support
@@ -415,7 +416,9 @@ export default class TextualBody extends React.Component {
         if (this.props.highlightLink) {
             body = <a href={this.props.highlightLink}>{ body }</a>;
         } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
-            body = <a href="#" onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}>{ body }</a>;
+            body = <a href="#"
+                onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
+            >{ body }</a>;
         }
 
         let widgets;

src/components/views/messages/TileErrorBoundary.js

@@ -19,6 +19,7 @@ import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
+import SdkConfig from "../../../SdkConfig";
 
 export default class TileErrorBoundary extends React.Component {
     constructor(props) {
@@ -54,14 +55,20 @@ export default class TileErrorBoundary extends React.Component {
                 mx_EventTile_content: true,
                 mx_EventTile_tileError: true,
             };
+
+            let submitLogsButton;
+            if (SdkConfig.get().bug_report_endpoint_url) {
+                submitLogsButton = <a onClick={this._onBugReport} href="#">
+                    {_t("Submit logs")}
+                </a>;
+            }
+
             return (<div className={classNames(classes)}>
                 <div className="mx_EventTile_line">
                     <span>
                         {_t("Can't load this message")}
                         { mxEvent && ` (${mxEvent.getType()})` }
-                        <a onClick={this._onBugReport} href="#">
-                            {_t("Submit logs")}
-                        </a>
+                        { submitLogsButton }
                     </span>
                 </div>
             </div>);

src/components/views/right_panel/BaseCard.tsx

@@ -0,0 +1,99 @@
+/*
+Copyright 2020 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, {ReactNode} from 'react';
+import classNames from 'classnames';
+
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import {Action} from "../../../dispatcher/actions";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+
+interface IProps {
+    header?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    withoutScrollContainer?: boolean;
+    previousPhase?: RightPanelPhases;
+    closeLabel?: string;
+    onClose?(): void;
+}
+
+interface IGroupProps {
+    className?: string;
+    title: string;
+}
+
+export const Group: React.FC<IGroupProps> = ({ className, title, children }) => {
+    return <div className={classNames("mx_BaseCard_Group", className)}>
+        <h1>{title}</h1>
+        {children}
+    </div>;
+};
+
+const BaseCard: React.FC<IProps> = ({
+    closeLabel,
+    onClose,
+    className,
+    header,
+    footer,
+    withoutScrollContainer,
+    previousPhase,
+    children,
+}) => {
+    let backButton;
+    if (previousPhase) {
+        const onBackClick = () => {
+            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                action: Action.SetRightPanelPhase,
+                phase: previousPhase,
+            });
+        };
+        backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={_t("Back")} />;
+    }
+
+    let closeButton;
+    if (onClose) {
+        closeButton = <AccessibleButton
+            className="mx_BaseCard_close"
+            onClick={onClose}
+            title={closeLabel || _t("Close")}
+        />;
+    }
+
+    if (!withoutScrollContainer) {
+        children = <AutoHideScrollbar>
+            { children }
+        </AutoHideScrollbar>;
+    }
+
+    return (
+        <div className={classNames("mx_BaseCard", className)}>
+            <div className="mx_BaseCard_header">
+                { backButton }
+                { closeButton }
+                { header }
+            </div>
+            { children }
+            { footer && <div className="mx_BaseCard_footer">{ footer }</div> }
+        </div>
+    );
+};
+
+export default BaseCard;

src/components/views/right_panel/EncryptionPanel.tsx

@@ -27,6 +27,9 @@ import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
 import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -42,7 +45,14 @@ interface IProps {
 }
 
 const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
-    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
+    const {
+        verificationRequest,
+        verificationRequestPromise,
+        member,
+        onClose,
+        layout,
+        isRoomEncrypted,
+    } = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -95,22 +105,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
 
-    const onCancel = useCallback(function() {
-        if (request) {
-            request.cancel();
-        }
-    }, [request]);
-
-    let cancelButton: JSX.Element;
-    if (layout !== "dialog" && request && request.pending) {
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        cancelButton = (<AccessibleButton
-            className="mx_EncryptionPanel_cancel"
-            onClick={onCancel}
-            title={_t('Cancel')}
-        ></AccessibleButton>);
-    }
-
     const onStartVerification = useCallback(async () => {
         setRequesting(true);
         const cli = MatrixClientPeg.get();
@@ -118,7 +112,13 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId);
         setRequest(verificationRequest_);
         setPhase(verificationRequest_.phase);
-    }, [member.userId]);
+        // Notify the RightPanelStore about this
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.EncryptionPanel,
+            refireParams: { member, verificationRequest: verificationRequest_ },
+        });
+    }, [member]);
 
     const requested =
         (!request && isRequesting) ||
@@ -128,8 +128,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         member.userId === MatrixClientPeg.get().getUserId();
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
-        return (<React.Fragment>
-            {cancelButton}
+        return (
             <EncryptionInfo
                 isRoomEncrypted={isRoomEncrypted}
                 onStartVerification={onStartVerification}
@@ -138,10 +137,9 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 waitingForOtherParty={requested && initiatedByMe}
                 waitingForNetwork={requested && !initiatedByMe}
                 inDialog={layout === "dialog"} />
-        </React.Fragment>);
+        );
     } else {
-        return (<React.Fragment>
-            {cancelButton}
+        return (
             <VerificationPanel
                 isRoomEncrypted={isRoomEncrypted}
                 layout={layout}
@@ -152,7 +150,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 inDialog={layout === "dialog"}
                 phase={phase}
             />
-        </React.Fragment>);
+        );
     }
 };
 

src/components/views/right_panel/HeaderButton.tsx

@@ -31,7 +31,7 @@ interface IProps {
     // The badge to display above the icon
     badge?: React.ReactNode;
     // The parameters to track the click event
-    analytics: string[];
+    analytics: Parameters<typeof Analytics.trackEvent>;
 
     // Button name
     name: string;

src/components/views/right_panel/HeaderButtons.tsx

@@ -96,8 +96,7 @@ export default abstract class HeaderButtons extends React.Component<IProps, ISta
     public abstract renderButtons(): JSX.Element[];
 
     public render() {
-        // inline style as this will be swapped around in future commits
-        return <div className="mx_HeaderButtons" role="tablist">
+        return <div className="mx_HeaderButtons">
             {this.renderButtons()}
         </div>;
     }

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -19,14 +19,18 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HeaderKind} from './HeaderButtons';
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import {Action} from "../../../dispatcher/actions";
 import {ActionPayload} from "../../../dispatcher/payloads";
+import RightPanelStore from "../../../stores/RightPanelStore";
 
-const MEMBER_PHASES = [
+const ROOM_INFO_PHASES = [
+    RightPanelPhases.RoomSummary,
+    RightPanelPhases.Widget,
+    RightPanelPhases.FilePanel,
     RightPanelPhases.RoomMemberList,
     RightPanelPhases.RoomMemberInfo,
     RightPanelPhases.EncryptionPanel,
@@ -54,22 +58,21 @@ export default class RoomHeaderButtons extends HeaderButtons {
         }
     }
 
-    private onMembersClicked = () => {
-        if (this.state.phase === RightPanelPhases.RoomMemberInfo) {
-            // send the active phase to trigger a toggle
-            // XXX: we should pass refireParams here but then it won't collapse as we desire it to
-            this.setPhase(RightPanelPhases.RoomMemberInfo);
+    private onRoomSummaryClicked = () => {
+        // use roomPanelPhase rather than this.state.phase as it remembers the latest one if we close
+        const lastPhase = RightPanelStore.getSharedInstance().roomPanelPhase;
+        if (ROOM_INFO_PHASES.includes(lastPhase)) {
+            if (this.state.phase === lastPhase) {
+                this.setPhase(lastPhase);
+            } else {
+                this.setPhase(lastPhase, RightPanelStore.getSharedInstance().roomPanelPhaseParams);
+            }
         } else {
             // This toggles for us, if needed
-            this.setPhase(RightPanelPhases.RoomMemberList);
+            this.setPhase(RightPanelPhases.RoomSummary);
         }
     };
 
-    private onFilesClicked = () => {
-        // This toggles for us, if needed
-        this.setPhase(RightPanelPhases.FilePanel);
-    };
-
     private onNotificationsClicked = () => {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.NotificationPanel);
@@ -77,24 +80,22 @@ export default class RoomHeaderButtons extends HeaderButtons {
 
     public renderButtons() {
         return [
-            <HeaderButton key="membersButton" name="membersButton"
-                title={_t('Members')}
-                isHighlighted={this.isPhase(MEMBER_PHASES)}
-                onClick={this.onMembersClicked}
-                analytics={['Right Panel', 'Member List Button', 'click']}
-            />,
-            <HeaderButton key="filesButton" name="filesButton"
-                title={_t('Files')}
-                isHighlighted={this.isPhase(RightPanelPhases.FilePanel)}
-                onClick={this.onFilesClicked}
-                analytics={['Right Panel', 'File List Button', 'click']}
-            />,
-            <HeaderButton key="notifsButton" name="notifsButton"
+            <HeaderButton
+                key="notifsButton"
+                name="notifsButton"
                 title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
                 onClick={this.onNotificationsClicked}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
             />,
+            <HeaderButton
+                key="roomSummaryButton"
+                name="roomSummaryButton"
+                title={_t('Room Info')}
+                isHighlighted={this.isPhase(ROOM_INFO_PHASES)}
+                onClick={this.onRoomSummaryClicked}
+                analytics={['Right Panel', 'Room Summary Button', 'click']}
+            />,
         ];
     }
 }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -0,0 +1,275 @@
+/*
+Copyright 2020 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, {useCallback, useState, useEffect, useContext} from "react";
+import classNames from "classnames";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
+import BaseCard, { Group } from "./BaseCard";
+import { _t } from '../../../languageHandler';
+import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import Modal from "../../../Modal";
+import ShareDialog from '../dialogs/ShareDialog';
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
+import SettingsStore from "../../../settings/SettingsStore";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import WidgetAvatar from "../avatars/WidgetAvatar";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import WidgetStore, {IApp, MAX_PINNED} from "../../../stores/WidgetStore";
+import { E2EStatus } from "../../../utils/ShieldUtils";
+import RoomContext from "../../../contexts/RoomContext";
+import {UIFeature} from "../../../settings/UIFeature";
+import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
+import WidgetContextMenu from "../context_menus/WidgetContextMenu";
+
+interface IProps {
+    room: Room;
+    onClose(): void;
+}
+
+interface IAppsSectionProps {
+    room: Room;
+}
+
+interface IButtonProps {
+    className: string;
+    onClick(): void;
+}
+
+const Button: React.FC<IButtonProps> = ({ children, className, onClick }) => {
+    return <AccessibleButton
+        className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", className)}
+        onClick={onClick}
+    >
+        { children }
+    </AccessibleButton>;
+};
+
+export const useWidgets = (room: Room) => {
+    const [apps, setApps] = useState<IApp[]>(WidgetStore.instance.getApps(room.roomId));
+
+    const updateApps = useCallback(() => {
+        // Copy the array so that we always trigger a re-render, as some updates mutate the array of apps/settings
+        setApps([...WidgetStore.instance.getApps(room.roomId)]);
+    }, [room]);
+
+    useEffect(updateApps, [room]);
+    useEventEmitter(WidgetStore.instance, room.roomId, updateApps);
+
+    return apps;
+};
+
+interface IAppRowProps {
+    app: IApp;
+}
+
+const AppRow: React.FC<IAppRowProps> = ({ app }) => {
+    const name = WidgetUtils.getWidgetName(app);
+    const dataTitle = WidgetUtils.getWidgetDataTitle(app);
+    const subtitle = dataTitle && " - " + dataTitle;
+
+    const onOpenWidgetClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.Widget,
+            refireParams: {
+                widgetId: app.id,
+            },
+        });
+    };
+
+    const isPinned = WidgetStore.instance.isPinned(app.id);
+    const togglePin = isPinned
+        ? () => { WidgetStore.instance.unpinWidget(app.id); }
+        : () => { WidgetStore.instance.pinWidget(app.id); };
+
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+    let contextMenu;
+    if (menuDisplayed) {
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = <WidgetContextMenu
+            chevronFace={ChevronFace.None}
+            right={window.innerWidth - rect.right}
+            bottom={window.innerHeight - rect.top}
+            onFinished={closeMenu}
+            app={app}
+        />;
+    }
+
+    const cannotPin = !isPinned && !WidgetStore.instance.canPin(app.id);
+
+    let pinTitle: string;
+    if (cannotPin) {
+        pinTitle = _t("You can only pin up to %(count)s widgets", { count: MAX_PINNED });
+    } else {
+        pinTitle = isPinned ? _t("Unpin") : _t("Pin");
+    }
+
+    const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", {
+        mx_RoomSummaryCard_Button_pinned: isPinned,
+    });
+
+    return <div className={classes} ref={handle}>
+        <AccessibleTooltipButton
+            className="mx_RoomSummaryCard_icon_app"
+            onClick={onOpenWidgetClick}
+            // only show a tooltip if the widget is pinned
+            title={isPinned ? _t("Unpin a widget to view it in this panel") : ""}
+            forceHide={!isPinned}
+            disabled={isPinned}
+            yOffset={-48}
+        >
+            <WidgetAvatar app={app} />
+            <span>{name}</span>
+            { subtitle }
+        </AccessibleTooltipButton>
+
+        <ContextMenuTooltipButton
+            className="mx_RoomSummaryCard_app_options"
+            isExpanded={menuDisplayed}
+            onClick={openMenu}
+            title={_t("Options")}
+            yOffset={-24}
+        />
+
+        <AccessibleTooltipButton
+            className="mx_RoomSummaryCard_app_pinToggle"
+            onClick={togglePin}
+            title={pinTitle}
+            disabled={cannotPin}
+            yOffset={-24}
+        />
+
+        { contextMenu }
+    </div>;
+};
+
+const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
+    const apps = useWidgets(room);
+
+    const onManageIntegrations = () => {
+        const managers = IntegrationManagers.sharedInstance();
+        if (!managers.hasManager()) {
+            managers.openNoManagerDialog();
+        } else {
+            if (SettingsStore.getValue("feature_many_integration_managers")) {
+                managers.openAll(room);
+            } else {
+                managers.getPrimaryManager().open(room);
+            }
+        }
+    };
+
+    return <Group className="mx_RoomSummaryCard_appsGroup" title={_t("Widgets")}>
+        { apps.map(app => <AppRow key={app.id} app={app} />) }
+
+        <AccessibleButton kind="link" onClick={onManageIntegrations}>
+            { apps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots") }
+        </AccessibleButton>
+    </Group>;
+};
+
+const onRoomMembersClick = () => {
+    defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+        action: Action.SetRightPanelPhase,
+        phase: RightPanelPhases.RoomMemberList,
+    });
+};
+
+const onRoomFilesClick = () => {
+    defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+        action: Action.SetRightPanelPhase,
+        phase: RightPanelPhases.FilePanel,
+    });
+};
+
+const onRoomSettingsClick = () => {
+    defaultDispatcher.dispatch({ action: "open_room_settings" });
+};
+
+const useMemberCount = (room: Room) => {
+    const [count, setCount] = useState(room.getJoinedMembers().length);
+    useEventEmitter(room.currentState, "RoomState.members", () => {
+        setCount(room.getJoinedMembers().length);
+    });
+    return count;
+};
+
+const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
+    const cli = useContext(MatrixClientContext);
+
+    const onShareRoomClick = () => {
+        Modal.createTrackedDialog('share room dialog', '', ShareDialog, {
+            target: room,
+        });
+    };
+
+    const isRoomEncrypted = useIsEncrypted(cli, room);
+    const roomContext = useContext(RoomContext);
+    const e2eStatus = roomContext.e2eStatus;
+
+    const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
+    const header = <React.Fragment>
+        <div className="mx_RoomSummaryCard_avatar" role="presentation">
+            <RoomAvatar room={room} height={54} width={54} viewAvatarOnClick />
+            <TextWithTooltip
+                tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
+                class={classNames("mx_RoomSummaryCard_e2ee", {
+                    mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
+                    mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
+                    mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
+                })}
+            />
+        </div>
+
+        <h2 title={room.name}>{ room.name }</h2>
+        <div className="mx_RoomSummaryCard_alias" title={alias}>
+            { alias }
+        </div>
+    </React.Fragment>;
+
+    const memberCount = useMemberCount(room);
+
+    return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
+        <Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
+            <Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
+                {_t("%(count)s people", { count: memberCount })}
+            </Button>
+            <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
+                {_t("Show files")}
+            </Button>
+            <Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
+                {_t("Share room")}
+            </Button>
+            <Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
+                {_t("Room settings")}
+            </Button>
+        </Group>
+
+        { SettingsStore.getValue(UIFeature.Widgets) && <AppsSection room={room} /> }
+    </BaseCard>;
+};
+
+export default RoomSummaryCard;

src/components/views/right_panel/UserInfo.tsx

@@ -17,21 +17,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useMemo, useState, useEffect, useContext} from 'react';
-import PropTypes from 'prop-types';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import classNames from 'classnames';
-import {Group, RoomMember, User, Room} from 'matrix-js-sdk';
+import {MatrixClient} from 'matrix-js-sdk/src/client';
+import {RoomMember} from 'matrix-js-sdk/src/models/room-member';
+import {User} from 'matrix-js-sdk/src/models/user';
+import {Room} from 'matrix-js-sdk/src/models/room';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
+
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import createRoom, {privateShouldBeEncrypted} from '../../../createRoom';
+import {_t} from '../../../languageHandler';
+import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
 import SettingsStore from "../../../settings/SettingsStore";
-import {EventTimeline} from "matrix-js-sdk";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
@@ -42,12 +43,31 @@ import {textualPowerLevel} from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import EncryptionPanel from "./EncryptionPanel";
-import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
-import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
+import {useAsyncMemo} from '../../../hooks/useAsyncMemo';
+import {legacyVerifyUser, verifyDevice, verifyUser} from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
 import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
+import BaseCard from "./BaseCard";
+import {E2EStatus} from "../../../utils/ShieldUtils";
+import ImageView from "../elements/ImageView";
+import Spinner from "../elements/Spinner";
+import PowerSelector from "../elements/PowerSelector";
+import MemberAvatar from "../avatars/MemberAvatar";
+import PresenceLabel from "../rooms/PresenceLabel";
+import ShareDialog from "../dialogs/ShareDialog";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
+import InfoDialog from "../dialogs/InfoDialog";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
-const _disambiguateDevices = (devices) => {
+interface IDevice {
+    deviceId: string;
+    ambiguous?: boolean;
+    getDisplayName(): string;
+}
+
+const disambiguateDevices = (devices: IDevice[]) => {
     const names = Object.create(null);
     for (let i = 0; i < devices.length; i++) {
         const name = devices[i].getDisplayName();
@@ -64,11 +84,11 @@ const _disambiguateDevices = (devices) => {
     }
 };
 
-export const getE2EStatus = (cli, userId, devices) => {
+export const getE2EStatus = (cli: MatrixClient, userId: string, devices: IDevice[]): E2EStatus => {
     const isMe = userId === cli.getUserId();
     const userTrust = cli.checkUserTrust(userId);
     if (!userTrust.isCrossSigningVerified()) {
-        return userTrust.wasCrossSigningVerified() ? "warning" : "normal";
+        return userTrust.wasCrossSigningVerified() ? E2EStatus.Warning : E2EStatus.Normal;
     }
 
     const anyDeviceUnverified = devices.some(device => {
@@ -81,21 +101,11 @@ export const getE2EStatus = (cli, userId, devices) => {
         const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
         return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
     });
-    return anyDeviceUnverified ? "warning" : "verified";
+    return anyDeviceUnverified ? E2EStatus.Warning : E2EStatus.Verified;
 };
 
-async function openDMForUser(matrixClient, userId) {
-    const dmRooms = DMRoomMap.shared().getDMRoomsForUserId(userId);
-    const lastActiveRoom = dmRooms.reduce((lastActiveRoom, roomId) => {
-        const room = matrixClient.getRoom(roomId);
-        if (!room || room.getMyMembership() === "leave") {
-            return lastActiveRoom;
-        }
-        if (!lastActiveRoom || lastActiveRoom.getLastActiveTimestamp() < room.getLastActiveTimestamp()) {
-            return room;
-        }
-        return lastActiveRoom;
-    }, null);
+async function openDMForUser(matrixClient: MatrixClient, userId: string) {
+    const lastActiveRoom = findDMForUser(matrixClient, userId);
 
     if (lastActiveRoom) {
         dis.dispatch({
@@ -107,6 +117,7 @@ async function openDMForUser(matrixClient, userId) {
 
     const createRoomOptions = {
         dmUserId: userId,
+        encryption: undefined,
     };
 
     if (privateShouldBeEncrypted()) {
@@ -122,10 +133,12 @@ async function openDMForUser(matrixClient, userId) {
         }
     }
 
-    createRoom(createRoomOptions);
+    return createRoom(createRoomOptions);
 }
 
-function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
+type SetUpdating = (updating: boolean) => void;
+
+function useHasCrossSigningKeys(cli: MatrixClient, member: RoomMember, canVerify: boolean, setUpdating: SetUpdating) {
     return useAsyncMemo(async () => {
         if (!canVerify) {
             return undefined;
@@ -142,7 +155,7 @@ function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
     }, [cli, member, canVerify], undefined);
 }
 
-function DeviceItem({userId, device}) {
+function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
@@ -169,8 +182,8 @@ function DeviceItem({userId, device}) {
     };
 
     const deviceName = device.ambiguous ?
-            (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
-            device.getDisplayName();
+        (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
+        device.getDisplayName();
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
@@ -198,8 +211,7 @@ function DeviceItem({userId, device}) {
     }
 }
 
-function DevicesSection({devices, userId, loading}) {
-    const Spinner = sdk.getComponent("elements.Spinner");
+function DevicesSection({devices, userId, loading}: {devices: IDevice[], userId: string, loading: boolean}) {
     const cli = useContext(MatrixClientContext);
     const userTrust = cli.checkUserTrust(userId);
 
@@ -210,7 +222,7 @@ function DevicesSection({devices, userId, loading}) {
         return <Spinner />;
     }
     if (devices === null) {
-        return _t("Unable to load session list");
+        return <>{_t("Unable to load session list")}</>;
     }
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));
@@ -285,7 +297,11 @@ function DevicesSection({devices, userId, loading}) {
     );
 }
 
-const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
+const UserOptionsSection: React.FC<{
+    member: RoomMember;
+    isIgnored: boolean;
+    canInvite: boolean;
+}> = ({member, isIgnored, canInvite}) => {
     const cli = useContext(MatrixClientContext);
 
     let ignoreButton = null;
@@ -296,7 +312,6 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
     const isMe = member.userId === cli.getUserId();
 
     const onShareUserClick = () => {
-        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room member dialog', '', ShareDialog, {
             target: member,
         });
@@ -318,7 +333,10 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
         };
 
         ignoreButton = (
-            <AccessibleButton onClick={onIgnoreToggle} className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}>
+            <AccessibleButton
+                onClick={onIgnoreToggle}
+                className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}
+            >
                 { isIgnored ? _t("Unignore") : _t("Ignore") }
             </AccessibleButton>
         );
@@ -341,11 +359,14 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
                 });
             };
 
-            readReceiptButton = (
-                <AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
-                    { _t('Jump to read receipt') }
-                </AccessibleButton>
-            );
+            const room = cli.getRoom(member.roomId);
+            if (room?.getEventReadUpTo(member.userId)) {
+                readReceiptButton = (
+                    <AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
+                        { _t('Jump to read receipt') }
+                    </AccessibleButton>
+                );
+            }
 
             insertPillButton = (
                 <AccessibleButton onClick={onInsertPillButton} className={"mx_UserInfo_field"}>
@@ -367,7 +388,6 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
                         }
                     });
                 } catch (err) {
-                    const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
                     Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
                         title: _t('Failed to invite'),
                         description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -413,8 +433,7 @@ const UserOptionsSection = ({member, isIgnored, canInvite, devices}) => {
     );
 };
 
-const _warnSelfDemote = async () => {
-    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+const warnSelfDemote = async () => {
     const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
         title: _t("Demote yourself?"),
         description:
@@ -430,7 +449,7 @@ const _warnSelfDemote = async () => {
     return confirmed;
 };
 
-const GenericAdminToolsContainer = ({children}) => {
+const GenericAdminToolsContainer: React.FC<{}> = ({children}) => {
     return (
         <div className="mx_UserInfo_container">
             <h3>{ _t("Admin Tools") }</h3>
@@ -441,7 +460,20 @@ const GenericAdminToolsContainer = ({children}) => {
     );
 };
 
-const _isMuted = (member, powerLevelContent) => {
+interface IPowerLevelsContent {
+    events?: Record<string, number>;
+    // eslint-disable-next-line camelcase
+    users_default?: number;
+    // eslint-disable-next-line camelcase
+    events_default?: number;
+    // eslint-disable-next-line camelcase
+    state_default?: number;
+    ban?: number;
+    kick?: number;
+    redact?: number;
+}
+
+const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) => {
     if (!powerLevelContent || !member) return false;
 
     const levelToSend = (
@@ -451,8 +483,8 @@ const _isMuted = (member, powerLevelContent) => {
     return member.powerLevel < levelToSend;
 };
 
-const useRoomPowerLevels = (cli, room) => {
-    const [powerLevels, setPowerLevels] = useState({});
+export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
+    const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>({});
 
     const update = useCallback(() => {
         if (!room) {
@@ -479,14 +511,19 @@ const useRoomPowerLevels = (cli, room) => {
     return powerLevels;
 };
 
-const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
+interface IBaseProps {
+    member: RoomMember;
+    startUpdating(): void;
+    stopUpdating(): void;
+}
+
+const RoomKickButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     // check if user can be kicked/disinvited
     if (member.membership !== "invite" && member.membership !== "join") return null;
 
     const onKick = async () => {
-        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onKick',
@@ -509,7 +546,6 @@ const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
             // get out of sync if we force setState here!
             console.log("Kick success");
         }, function(err) {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Kick error: " + err);
             Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
                 title: _t("Failed to kick"),
@@ -526,7 +562,7 @@ const RoomKickButton = ({member, startUpdating, stopUpdating}) => {
     </AccessibleButton>;
 };
 
-const RedactMessagesButton = ({member}) => {
+const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
     const cli = useContext(MatrixClientContext);
 
     const onRedactAllMessages = async () => {
@@ -540,7 +576,10 @@ const RedactMessagesButton = ({member}) => {
         while (timeline) {
             eventsToRedact = timeline.getEvents().reduce((events, event) => {
                 if (event.getSender() === userId && !event.isRedacted() && !event.isRedaction() &&
-                    event.getType() !== "m.room.create"
+                    event.getType() !== EventType.RoomCreate &&
+                    // Don't redact ACLs because that'll obliterate the room
+                    // See https://github.com/matrix-org/synapse/issues/4042 for details.
+                    event.getType() !== EventType.RoomServerAcl
                 ) {
                     return events.concat(event);
                 } else {
@@ -554,7 +593,6 @@ const RedactMessagesButton = ({member}) => {
         const user = member.name;
 
         if (count === 0) {
-            const InfoDialog = sdk.getComponent("dialogs.InfoDialog");
             Modal.createTrackedDialog('No user messages found to remove', '', InfoDialog, {
                 title: _t("No recent messages by %(user)s found", {user}),
                 description:
@@ -563,14 +601,14 @@ const RedactMessagesButton = ({member}) => {
                     </div>,
             });
         } else {
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
             const {finished} = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, {
                 title: _t("Remove recent messages by %(user)s", {user}),
                 description:
                     <div>
-                        <p>{ _t("You are about to remove %(count)s messages by %(user)s. This cannot be undone. Do you wish to continue?", {count, user}) }</p>
-                        <p>{ _t("For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.") }</p>
+                        <p>{ _t("You are about to remove %(count)s messages by %(user)s. " +
+                            "This cannot be undone. Do you wish to continue?", {count, user}) }</p>
+                        <p>{ _t("For a large amount of messages, this might take some time. " +
+                            "Please don't refresh your client in the meantime.") }</p>
                     </div>,
                 button: _t("Remove %(count)s messages", {count}),
             });
@@ -603,11 +641,10 @@ const RedactMessagesButton = ({member}) => {
     </AccessibleButton>;
 };
 
-const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
+const BanToggleButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     const onBanOrUnban = async () => {
-        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         const {finished} = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onBanOrUnban',
@@ -636,7 +673,6 @@ const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
             // get out of sync if we force setState here!
             console.log("Ban success");
         }, function(err) {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Ban error: " + err);
             Modal.createTrackedDialog('Failed to ban user', '', ErrorDialog, {
                 title: _t("Error"),
@@ -661,22 +697,26 @@ const BanToggleButton = ({member, startUpdating, stopUpdating}) => {
     </AccessibleButton>;
 };
 
-const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdating}) => {
+interface IBaseRoomProps extends IBaseProps {
+    room: Room;
+    powerLevels: IPowerLevelsContent;
+}
+
+const MuteToggleButton: React.FC<IBaseRoomProps> = ({member, room, powerLevels, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     // Don't show the mute/unmute option if the user is not in the room
     if (member.membership !== "join") return null;
 
-    const isMuted = _isMuted(member, powerLevels);
+    const muted = isMuted(member, powerLevels);
     const onMuteToggle = async () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const roomId = member.roomId;
         const target = member.userId;
 
         // if muting self, warn as it may be irreversible
         if (target === cli.getUserId()) {
             try {
-                if (!(await _warnSelfDemote())) return;
+                if (!(await warnSelfDemote())) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
                 return;
@@ -692,7 +732,7 @@ const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdatin
             powerLevels.events_default
         );
         let level;
-        if (isMuted) { // unmute
+        if (muted) { // unmute
             level = levelToSend;
         } else { // mute
             level = levelToSend - 1;
@@ -718,16 +758,23 @@ const MuteToggleButton = ({member, room, powerLevels, startUpdating, stopUpdatin
     };
 
     const classes = classNames("mx_UserInfo_field", {
-        mx_UserInfo_destructive: !isMuted,
+        mx_UserInfo_destructive: !muted,
     });
 
-    const muteLabel = isMuted ? _t("Unmute") : _t("Mute");
+    const muteLabel = muted ? _t("Unmute") : _t("Mute");
     return <AccessibleButton className={classes} onClick={onMuteToggle}>
         { muteLabel }
     </AccessibleButton>;
 };
 
-const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpdating, powerLevels}) => {
+const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
+    room,
+    children,
+    member,
+    startUpdating,
+    stopUpdating,
+    powerLevels,
+}) => {
     const cli = useContext(MatrixClientContext);
     let kickButton;
     let banButton;
@@ -747,6 +794,11 @@ const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpd
     } = powerLevels;
 
     const me = room.getMember(cli.getUserId());
+    if (!me) {
+        // we aren't in the room, so return no admin tooling
+        return <div />;
+    }
+
     const isMe = me.userId === member.userId;
     const canAffectUser = member.powerLevel < me.powerLevel || isMe;
 
@@ -786,7 +838,18 @@ const RoomAdminToolsContainer = ({room, children, member, startUpdating, stopUpd
     return <div />;
 };
 
-const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating, stopUpdating}) => {
+interface GroupMember {
+    userId: string;
+    displayname?: string; // XXX: GroupMember objects are inconsistent :((
+    avatarUrl?: string;
+}
+
+const GroupAdminToolsSection: React.FC<{
+    groupId: string;
+    groupMember: GroupMember;
+    startUpdating(): void;
+    stopUpdating(): void;
+}> = ({children, groupId, groupMember, startUpdating, stopUpdating}) => {
     const cli = useContext(MatrixClientContext);
 
     const [isPrivileged, setIsPrivileged] = useState(false);
@@ -814,8 +877,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
     }, [groupId, groupMember.userId]);
 
     if (isPrivileged) {
-        const _onKick = async () => {
-            const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        const onKick = async () => {
             const {finished} = Modal.createDialog(ConfirmUserActionDialog, {
                 matrixClient: cli,
                 groupMember,
@@ -836,7 +898,6 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
                     member: null,
                 });
             }).catch((e) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
                     title: _t('Error'),
                     description: isInvited ?
@@ -850,7 +911,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
         };
 
         const kickButton = (
-            <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={_onKick}>
+            <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onKick}>
                 { isInvited ? _t('Disinvite') : _t('Remove from community') }
             </AccessibleButton>
         );
@@ -870,13 +931,7 @@ const GroupAdminToolsSection = ({children, groupId, groupMember, startUpdating,
     return <div />;
 };
 
-const GroupMember = PropTypes.shape({
-    userId: PropTypes.string.isRequired,
-    displayname: PropTypes.string, // XXX: GroupMember objects are inconsistent :((
-    avatarUrl: PropTypes.string,
-});
-
-const useIsSynapseAdmin = (cli) => {
+const useIsSynapseAdmin = (cli: MatrixClient) => {
     const [isAdmin, setIsAdmin] = useState(false);
     useEffect(() => {
         cli.isSynapseAdministrator().then((isAdmin) => {
@@ -888,14 +943,20 @@ const useIsSynapseAdmin = (cli) => {
     return isAdmin;
 };
 
-const useHomeserverSupportsCrossSigning = (cli) => {
-    return useAsyncMemo(async () => {
+const useHomeserverSupportsCrossSigning = (cli: MatrixClient) => {
+    return useAsyncMemo<boolean>(async () => {
         return cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
     }, [cli], false);
 };
 
-function useRoomPermissions(cli, room, user) {
-    const [roomPermissions, setRoomPermissions] = useState({
+interface IRoomPermissions {
+    modifyLevelMax: number;
+    canEdit: boolean;
+    canInvite: boolean;
+}
+
+function useRoomPermissions(cli: MatrixClient, room: Room, user: User): IRoomPermissions {
+    const [roomPermissions, setRoomPermissions] = useState<IRoomPermissions>({
         // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL
         modifyLevelMax: -1,
         canEdit: false,
@@ -940,7 +1001,7 @@ function useRoomPermissions(cli, room, user) {
         updateRoomPermissions();
         return () => {
             setRoomPermissions({
-                maximalPowerLevel: -1,
+                modifyLevelMax: -1,
                 canEdit: false,
                 canInvite: false,
             });
@@ -950,55 +1011,45 @@ function useRoomPermissions(cli, room, user) {
     return roomPermissions;
 }
 
-const PowerLevelSection = ({user, room, roomPermissions, powerLevels}) => {
-    const [isEditing, setEditing] = useState(false);
-    if (room && user.roomId) { // is in room
-        if (isEditing) {
-            return (<PowerLevelEditor
-                user={user} room={room} roomPermissions={roomPermissions}
-                onFinished={() => setEditing(false)} />);
-        } else {
-            const IconButton = sdk.getComponent('elements.IconButton');
-            const powerLevelUsersDefault = powerLevels.users_default || 0;
-            const powerLevel = parseInt(user.powerLevel, 10);
-            const modifyButton = roomPermissions.canEdit ?
-                (<IconButton icon="edit" onClick={() => setEditing(true)} />) : null;
-            const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
-            const label = _t("<strong>%(role)s</strong> in %(roomName)s",
-                {role, roomName: room.name},
-                {strong: label => <strong>{label}</strong>},
-            );
-            return (
-                <div className="mx_UserInfo_profileField">
-                    <div className="mx_UserInfo_roleDescription">{label}{modifyButton}</div>
-                </div>
-            );
-        }
+const PowerLevelSection: React.FC<{
+    user: User;
+    room: Room;
+    roomPermissions: IRoomPermissions;
+    powerLevels: IPowerLevelsContent;
+}> = ({user, room, roomPermissions, powerLevels}) => {
+    if (roomPermissions.canEdit) {
+        return (<PowerLevelEditor user={user} room={room} roomPermissions={roomPermissions} />);
     } else {
-        return null;
+        const powerLevelUsersDefault = powerLevels.users_default || 0;
+        const powerLevel = parseInt(user.powerLevel, 10);
+        const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
+        return (
+            <div className="mx_UserInfo_profileField">
+                <div className="mx_UserInfo_roleDescription">{role}</div>
+            </div>
+        );
     }
 };
 
-const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
+const PowerLevelEditor: React.FC<{
+    user: User;
+    room: Room;
+    roomPermissions: IRoomPermissions;
+}> = ({user, room, roomPermissions}) => {
     const cli = useContext(MatrixClientContext);
 
-    const [isUpdating, setIsUpdating] = useState(false);
     const [selectedPowerLevel, setSelectedPowerLevel] = useState(parseInt(user.powerLevel, 10));
-    const [isDirty, setIsDirty] = useState(false);
-    const onPowerChange = useCallback((powerLevel) => {
-        setIsDirty(true);
-        setSelectedPowerLevel(parseInt(powerLevel, 10));
-    }, [setSelectedPowerLevel, setIsDirty]);
+    const onPowerChange = useCallback(async (powerLevelStr: string) => {
+        const powerLevel = parseInt(powerLevelStr, 10);
+        setSelectedPowerLevel(powerLevel);
 
-    const changePowerLevel = useCallback(async () => {
-        const _applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
+        const applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
             return cli.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
                 function() {
                     // NO-OP; rely on the m.room.member event coming down else we could
                     // get out of sync if we force setState here!
                     console.log("Power change success");
                 }, function(err) {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to change power level " + err);
                     Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
                         title: _t("Error"),
@@ -1008,70 +1059,43 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
             );
         };
 
-        try {
-            if (!isDirty) {
-                return;
-            }
+        const roomId = user.roomId;
+        const target = user.userId;
 
-            setIsUpdating(true);
+        const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevelEvent) return;
 
-            const powerLevel = selectedPowerLevel;
-
-            const roomId = user.roomId;
-            const target = user.userId;
-
-            const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
-            if (!powerLevelEvent) return;
-
-            if (!powerLevelEvent.getContent().users) {
-                _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                return;
-            }
-
-            const myUserId = cli.getUserId();
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        const myUserId = cli.getUserId();
+        const myPower = powerLevelEvent.getContent().users[myUserId];
+        if (myPower && parseInt(myPower) === powerLevel) {
+            const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
+                title: _t("Warning!"),
+                description:
+                    <div>
+                        { _t("You will not be able to undo this change as you are promoting the user " +
+                            "to have the same power level as yourself.") }<br />
+                        { _t("Are you sure?") }
+                    </div>,
+                button: _t("Continue"),
+            });
 
+            const [confirmed] = await finished;
+            if (!confirmed) return;
+        } else if (myUserId === target) {
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
-            if (myUserId === target) {
-                try {
-                    if (!(await _warnSelfDemote())) return;
-                } catch (e) {
-                    console.error("Failed to warn about self demotion: ", e);
-                }
-                await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                return;
+            try {
+                if (!(await warnSelfDemote())) return;
+            } catch (e) {
+                console.error("Failed to warn about self demotion: ", e);
             }
-
-            const myPower = powerLevelEvent.getContent().users[myUserId];
-            if (parseInt(myPower) === parseInt(powerLevel)) {
-                const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
-                    title: _t("Warning!"),
-                    description:
-                        <div>
-                            { _t("You will not be able to undo this change as you are promoting the user " +
-                                "to have the same power level as yourself.") }<br />
-                            { _t("Are you sure?") }
-                        </div>,
-                    button: _t("Continue"),
-                });
-
-                const [confirmed] = await finished;
-                if (!confirmed) return;
-            }
-            await _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-        } finally {
-            onFinished();
         }
-    }, [user.roomId, user.userId, cli, selectedPowerLevel, isDirty, setIsUpdating, onFinished, room]);
+
+        await applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+    }, [user.roomId, user.userId, cli, room]);
 
     const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
     const powerLevelUsersDefault = powerLevelEvent ? powerLevelEvent.getContent().users_default : 0;
-    const IconButton = sdk.getComponent('elements.IconButton');
-    const Spinner = sdk.getComponent("elements.Spinner");
-    const buttonOrSpinner = isUpdating ? <Spinner w={16} h={16} /> :
-        <IconButton icon="check" onClick={changePowerLevel} />;
 
-    const PowerSelector = sdk.getComponent('elements.PowerSelector');
     return (
         <div className="mx_UserInfo_profileField">
             <PowerSelector
@@ -1080,14 +1104,12 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
                 maxValue={roomPermissions.modifyLevelMax}
                 usersDefault={powerLevelUsersDefault}
                 onChange={onPowerChange}
-                disabled={isUpdating}
             />
-            {buttonOrSpinner}
         </div>
     );
 };
 
-export const useDevices = (userId) => {
+export const useDevices = (userId: string) => {
     const cli = useContext(MatrixClientContext);
 
     // undefined means yet to be loaded, null means failed to load, otherwise list of devices
@@ -1098,7 +1120,7 @@ export const useDevices = (userId) => {
 
         let cancelled = false;
 
-        async function _downloadDeviceList() {
+        async function downloadDeviceList() {
             try {
                 await cli.downloadKeys([userId], true);
                 const devices = cli.getStoredDevicesForUser(userId);
@@ -1108,13 +1130,13 @@ export const useDevices = (userId) => {
                     return;
                 }
 
-                _disambiguateDevices(devices);
+                disambiguateDevices(devices);
                 setDevices(devices);
             } catch (err) {
                 setDevices(null);
             }
         }
-        _downloadDeviceList();
+        downloadDeviceList();
 
         // Handle being unmounted
         return () => {
@@ -1157,7 +1179,13 @@ export const useDevices = (userId) => {
     return devices;
 };
 
-const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
+const BasicUserInfo: React.FC<{
+    room: Room;
+    member: User | RoomMember;
+    groupId: string;
+    devices: IDevice[];
+    isRoomEncrypted: boolean;
+}> = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
@@ -1190,7 +1218,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const roomPermissions = useRoomPermissions(cli, room, member);
 
     const onSynapseDeactivate = useCallback(async () => {
-        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
         const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
             title: _t("Deactivate user?"),
             description:
@@ -1211,7 +1238,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             console.error("Failed to deactivate user");
             console.error(err);
 
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             Modal.createTrackedDialog('Failed to deactivate Synapse user', '', ErrorDialog, {
                 title: _t('Failed to deactivate user'),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -1264,18 +1290,22 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     }
 
     if (pendingUpdateCount > 0) {
-        const Loader = sdk.getComponent("elements.Spinner");
-        spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
+        spinner = <Spinner imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const memberDetails = (
-        <PowerLevelSection
-            powerLevels={powerLevels}
-            user={member}
-            room={room}
-            roomPermissions={roomPermissions}
-        />
-    );
+    let memberDetails;
+    // hide the Roles section for DMs as it doesn't make sense there
+    if (room && member.roomId && !DMRoomMap.shared().getUserIdForRoomId(member.roomId)) {
+        memberDetails = <div className="mx_UserInfo_container">
+            <h3>{ _t("Role") }</h3>
+            <PowerLevelSection
+                powerLevels={powerLevels}
+                user={member}
+                room={room}
+                roomPermissions={roomPermissions}
+            />
+        </div>;
+    }
 
     // only display the devices list if our client supports E2E
     const cryptoEnabled = cli.isCryptoEnabled();
@@ -1299,7 +1329,8 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const userTrust = cryptoEnabled && cli.checkUserTrust(member.userId);
     const userVerified = cryptoEnabled && userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
-    const canVerify = cryptoEnabled && homeserverSupportsCrossSigning && !userVerified && !isMe;
+    const canVerify = cryptoEnabled && homeserverSupportsCrossSigning && !userVerified && !isMe &&
+        devices && devices.length > 0;
 
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));
@@ -1326,7 +1357,6 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
             // HACK: only show a spinner if the device section spinner is not shown,
             // to avoid showing a double spinner
             // We should ask for a design that includes all the different loading states here
-            const Spinner = sdk.getComponent('elements.Spinner');
             verifyButton = <Spinner />;
         }
     }
@@ -1344,16 +1374,10 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     );
 
     return <React.Fragment>
-        { memberDetails &&
-        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
-            <div className="mx_UserInfo_memberDetails">
-                { memberDetails }
-            </div>
-        </div> }
+        { memberDetails }
 
         { securitySection }
         <UserOptionsSection
-            devices={devices}
             canInvite={roomPermissions.canInvite}
             isIgnored={isIgnored}
             member={member} />
@@ -1364,22 +1388,19 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     </React.Fragment>;
 };
 
-const UserInfoHeader = ({onClose, member, e2eStatus}) => {
-    const cli = useContext(MatrixClientContext);
+type Member = User | RoomMember | GroupMember;
 
-    let closeButton;
-    if (onClose) {
-        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
-            <div />
-        </AccessibleButton>;
-    }
+const UserInfoHeader: React.FC<{
+    member: Member;
+    e2eStatus: E2EStatus;
+}> = ({member, e2eStatus}) => {
+    const cli = useContext(MatrixClientContext);
 
     const onMemberAvatarClick = useCallback(() => {
         const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
 
         const httpUrl = cli.mxcUrlToHttp(avatarUrl);
-        const ImageView = sdk.getComponent("elements.ImageView");
         const params = {
             src: httpUrl,
             name: member.name,
@@ -1388,7 +1409,6 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
     }, [cli, member]);
 
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
     const avatarElement = (
         <div className="mx_UserInfo_avatar">
             <div>
@@ -1430,10 +1450,13 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
 
     let presenceLabel = null;
     if (showPresence) {
-        const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
-        presenceLabel = <PresenceLabel activeAgo={presenceLastActiveAgo}
-                                       currentlyActive={presenceCurrentlyActive}
-                                       presenceState={presenceState} />;
+        presenceLabel = (
+            <PresenceLabel
+                activeAgo={presenceLastActiveAgo}
+                currentlyActive={presenceCurrentlyActive}
+                presenceState={presenceState}
+            />
+        );
     }
 
     let statusLabel = null;
@@ -1448,7 +1471,6 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
 
     const displayName = member.name || member.displayname;
     return <React.Fragment>
-        { closeButton }
         { avatarElement }
 
         <div className="mx_UserInfo_container mx_UserInfo_separator">
@@ -1471,7 +1493,32 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
     </React.Fragment>;
 };
 
-const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemberInfo, ...props}) => {
+interface IProps {
+    user: Member;
+    groupId?: string;
+    room?: Room;
+    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo;
+    onClose(): void;
+}
+
+interface IPropsWithEncryptionPanel extends React.ComponentProps<typeof EncryptionPanel> {
+    user: Member;
+    groupId: void;
+    room: Room;
+    phase: RightPanelPhases.EncryptionPanel;
+    onClose(): void;
+}
+
+type Props = IProps | IPropsWithEncryptionPanel;
+
+const UserInfo: React.FC<Props> = ({
+    user,
+    groupId,
+    room,
+    onClose,
+    phase = RightPanelPhases.RoomMemberInfo,
+    ...props
+}) => {
     const cli = useContext(MatrixClientContext);
 
     // fetch latest room member if we have a room, so we don't show historical information, falling back to user
@@ -1495,7 +1542,7 @@ const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemb
                 <BasicUserInfo
                     room={room}
                     member={member}
-                    groupId={groupId}
+                    groupId={groupId as string}
                     devices={devices}
                     isRoomEncrypted={isRoomEncrypted} />
             );
@@ -1503,33 +1550,40 @@ const UserInfo = ({user, groupId, room, onClose, phase=RightPanelPhases.RoomMemb
         case RightPanelPhases.EncryptionPanel:
             classes.push("mx_UserInfo_smallAvatar");
             content = (
-                <EncryptionPanel {...props} member={member} onClose={onClose} isRoomEncrypted={isRoomEncrypted} />
+                <EncryptionPanel
+                    {...props as React.ComponentProps<typeof EncryptionPanel>}
+                    member={member}
+                    onClose={onClose}
+                    isRoomEncrypted={isRoomEncrypted}
+                />
             );
             break;
     }
 
-    return (
-        <div className={classes.join(" ")} role="tabpanel">
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />
+    let previousPhase: RightPanelPhases;
+    // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
+    if (room) {
+        previousPhase = RightPanelPhases.RoomMemberList;
+    }
 
-                { content }
-            </AutoHideScrollbar>
-        </div>
-    );
-};
+    let closeLabel = undefined;
+    if (phase === RightPanelPhases.EncryptionPanel) {
+        const verificationRequest = (props as React.ComponentProps<typeof EncryptionPanel>).verificationRequest;
+        if (verificationRequest && verificationRequest.pending) {
+            closeLabel = _t("Cancel");
+        }
+    }
 
-UserInfo.propTypes = {
-    user: PropTypes.oneOfType([
-        PropTypes.instanceOf(User),
-        PropTypes.instanceOf(RoomMember),
-        GroupMember,
-    ]).isRequired,
-    group: PropTypes.instanceOf(Group),
-    groupId: PropTypes.string,
-    room: PropTypes.instanceOf(Room),
-
-    onClose: PropTypes.func,
+    const header = <UserInfoHeader member={member} e2eStatus={e2eStatus} />;
+    return <BaseCard
+        className={classes.join(" ")}
+        header={header}
+        onClose={onClose}
+        closeLabel={closeLabel}
+        previousPhase={previousPhase}
+    >
+        { content }
+    </BaseCard>;
 };
 
 export default UserInfo;

src/components/views/right_panel/WidgetCard.tsx

@@ -0,0 +1,111 @@
+/*
+Copyright 2020 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, useEffect} from "react";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import BaseCard from "./BaseCard";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import AppTile from "../elements/AppTile";
+import {_t} from "../../../languageHandler";
+import {useWidgets} from "./RoomSummaryCard";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import {Action} from "../../../dispatcher/actions";
+import WidgetStore from "../../../stores/WidgetStore";
+import {ChevronFace, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
+import WidgetContextMenu from "../context_menus/WidgetContextMenu";
+
+interface IProps {
+    room: Room;
+    widgetId: string;
+    onClose(): void;
+}
+
+const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
+    const cli = useContext(MatrixClientContext);
+
+    const apps = useWidgets(room);
+    const app = apps.find(a => a.id === widgetId);
+    const isPinned = app && WidgetStore.instance.isPinned(app.id);
+
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    useEffect(() => {
+        if (!app || isPinned) {
+            // stop showing this card
+            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                action: Action.SetRightPanelPhase,
+                phase: RightPanelPhases.RoomSummary,
+            });
+        }
+    }, [app, isPinned]);
+
+    // Don't render anything as we are about to transition
+    if (!app || isPinned) return null;
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = (
+            <WidgetContextMenu
+                chevronFace={ChevronFace.None}
+                right={window.innerWidth - rect.right - 12}
+                top={rect.bottom + 12}
+                onFinished={closeMenu}
+                app={app}
+            />
+        );
+    }
+
+    const header = <React.Fragment>
+        <h2>{ WidgetUtils.getWidgetName(app) }</h2>
+        <ContextMenuButton
+            kind="secondary"
+            className="mx_WidgetCard_optionsButton"
+            inputRef={handle}
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            label={_t("Options")}
+        />
+        { contextMenu }
+    </React.Fragment>;
+
+    return <BaseCard
+        header={header}
+        className="mx_WidgetCard"
+        onClose={onClose}
+        previousPhase={RightPanelPhases.RoomSummary}
+        withoutScrollContainer
+    >
+        <AppTile
+            app={app}
+            fullWidth
+            show
+            showMenubar={false}
+            room={room}
+            userId={cli.getUserId()}
+            creatorUserId={app.creatorUserId}
+            widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
+            waitForIframeLoad={app.waitForIframeLoad}
+            whitelistCapabilities={WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, room.roomId)}
+        />
+    </BaseCard>;
+};
+
+export default WidgetCard;

src/components/views/room_settings/RoomProfileSettings.js

@@ -75,6 +75,15 @@ export default class RoomProfileSettings extends React.Component {
         });
     };
 
+    _clearProfile = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (!this.state.enableProfileSave) return;
+        this._removeAvatar();
+        this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName});
+    };
+
     _saveProfile = async (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -150,7 +159,12 @@ export default class RoomProfileSettings extends React.Component {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
         return (
-            <form onSubmit={this._saveProfile} autoComplete="off" noValidate={true}>
+            <form
+                onSubmit={this._saveProfile}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_ProfileSettings_profileForm"
+            >
                 <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
                        onChange={this._onAvatarChanged} accept="image/*" />
                 <div className="mx_ProfileSettings_profile">
@@ -169,10 +183,22 @@ export default class RoomProfileSettings extends React.Component {
                         uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
                         removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
                 </div>
-                <AccessibleButton onClick={this._saveProfile} kind="primary"
-                                  disabled={!this.state.enableProfileSave}>
-                    {_t("Save")}
-                </AccessibleButton>
+                <div className="mx_ProfileSettings_buttons">
+                    <AccessibleButton
+                        onClick={this._clearProfile}
+                        kind="link"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Cancel")}
+                    </AccessibleButton>
+                    <AccessibleButton
+                        onClick={this._saveProfile}
+                        kind="primary"
+                        disabled={!this.state.enableProfileSave}
+                    >
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </form>
         );
     }

src/components/views/rooms/AppsDrawer.js

@@ -15,27 +15,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import classNames from 'classnames';
+import {Resizable} from "re-resizable";
+
 import AppTile from '../elements/AppTile';
-import Modal from '../../../Modal';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
-import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import AccessibleButton from '../elements/AccessibleButton';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
-import classNames from 'classnames';
-import {Resizable} from "re-resizable";
 import {useLocalStorageState} from "../../../hooks/useLocalStorageState";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
-
-// The maximum number of widgets that can be added in a room
-const MAX_WIDGETS = 2;
+import WidgetStore from "../../../stores/WidgetStore";
+import ResizeHandle from "../elements/ResizeHandle";
+import Resizer from "../../../resizer/resizer";
+import PercentageDistributor from "../../../resizer/distributors/percentage";
 
 export default class AppsDrawer extends React.Component {
     static propTypes = {
@@ -43,12 +41,10 @@ export default class AppsDrawer extends React.Component {
         room: PropTypes.object.isRequired,
         resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
         showApps: PropTypes.bool, // Should apps be rendered
-        hide: PropTypes.bool, // If rendered, should apps drawer be visible
     };
 
     static defaultProps = {
         showApps: true,
-        hide: false,
     };
 
     constructor(props) {
@@ -57,22 +53,27 @@ export default class AppsDrawer extends React.Component {
         this.state = {
             apps: this._getApps(),
         };
+
+        this._resizeContainer = null;
+        this.resizer = this._createResizer();
+
+        this.props.resizeNotifier.on("isResizing", this.onIsResizing);
     }
 
     componentDidMount() {
         ScalarMessaging.startListening();
-        MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
-        WidgetEchoStore.on('update', this._updateApps);
+        WidgetStore.instance.on(this.props.room.roomId, this._updateApps);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
     componentWillUnmount() {
         ScalarMessaging.stopListening();
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
-        }
-        WidgetEchoStore.removeListener('update', this._updateApps);
+        WidgetStore.instance.off(this.props.room.roomId, this._updateApps);
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+        this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -82,6 +83,95 @@ export default class AppsDrawer extends React.Component {
         this._updateApps();
     }
 
+    onIsResizing = (resizing) => {
+        this.setState({ resizing });
+        if (!resizing) {
+            this._relaxResizer();
+        }
+    };
+
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const collapseConfig = {
+            onResizeStart: () => {
+                this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+            },
+            onResizeStop: () => {
+                this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
+                // persist to localStorage
+                localStorage.setItem(this._getStorageKey(), JSON.stringify([
+                    this.state.apps.map(app => app.id),
+                    ...this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
+                ]));
+            },
+        };
+        // pass a truthy container for now, we won't call attach until we update it
+        const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
+        resizer.setClassNames(classNames);
+        return resizer;
+    }
+
+    _collectResizer = (ref) => {
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+
+        if (ref) {
+            this.resizer.container = ref;
+            this.resizer.attach();
+        }
+        this._resizeContainer = ref;
+        this._loadResizerPreferences();
+    };
+
+    _getStorageKey = () => `mx_apps_drawer-${this.props.room.roomId}`;
+
+    _getAppsHash = (apps) => apps.map(app => app.id).join("~");
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
+            this._loadResizerPreferences();
+        }
+    }
+
+    _relaxResizer = () => {
+        const distributors = this.resizer.getDistributors();
+
+        // relax all items if they had any overconstrained flexboxes
+        distributors.forEach(d => d.start());
+        distributors.forEach(d => d.finish());
+    };
+
+    _loadResizerPreferences = () => {
+        try {
+            const [[...lastIds], ...sizes] = JSON.parse(localStorage.getItem(this._getStorageKey()));
+            // Every app was included in the last split, reuse the last sizes
+            if (this.state.apps.length <= lastIds.length && this.state.apps.every((app, i) => lastIds[i] === app.id)) {
+                sizes.forEach((size, i) => {
+                    const distributor = this.resizer.forHandleAt(i);
+                    if (distributor) {
+                        distributor.size = size;
+                        distributor.finish();
+                    }
+                });
+                return;
+            }
+        } catch (e) {
+            // this is expected
+        }
+
+        if (this.state.apps) {
+            const distributors = this.resizer.getDistributors();
+            distributors.forEach(d => d.item.clearSize());
+            distributors.forEach(d => d.start());
+            distributors.forEach(d => d.finish());
+        }
+    };
+
     onAction = (action) => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
@@ -100,40 +190,14 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    onRoomStateEvents = (ev, state) => {
-        if (ev.getRoomId() !== this.props.room.roomId || ev.getType() !== 'im.vector.modular.widgets') {
-            return;
-        }
-        this._updateApps();
-    };
-
-    _getApps() {
-        const widgets = WidgetEchoStore.getEchoedRoomWidgets(
-            this.props.room.roomId, WidgetUtils.getRoomWidgets(this.props.room),
-        );
-        return widgets.map((ev) => {
-            return WidgetUtils.makeAppConfig(
-                ev.getStateKey(), ev.getContent(), ev.getSender(), ev.getRoomId(), ev.getId(),
-            );
-        });
-    }
+    _getApps = () => WidgetStore.instance.getPinnedApps(this.props.room.roomId);
 
     _updateApps = () => {
-        const apps = this._getApps();
         this.setState({
-            apps: apps,
+            apps: this._getApps(),
         });
     };
 
-    _canUserModify() {
-        try {
-            return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-        } catch (err) {
-            console.error(err);
-            return false;
-        }
-    }
-
     _launchManageIntegrations() {
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll();
@@ -142,24 +206,9 @@ export default class AppsDrawer extends React.Component {
         }
     }
 
-    onClickAddWidget = (e) => {
-        e.preventDefault();
-        // Display a warning dialog if the max number of widgets have already been added to the room
-        const apps = this._getApps();
-        if (apps && apps.length >= MAX_WIDGETS) {
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-            const errorMsg = `The maximum number of ${MAX_WIDGETS} widgets have already been added to this room.`;
-            console.error(errorMsg);
-            Modal.createDialog(ErrorDialog, {
-                title: _t('Cannot add any more widgets'),
-                description: _t('The maximum permitted number of widgets have already been added to this room.'),
-            });
-            return;
-        }
-        this._launchManageIntegrations();
-    };
-
     render() {
+        if (!this.props.showApps) return <div />;
+
         const apps = this.state.apps.map((app, index, arr) => {
             const capWhitelist = WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, this.props.room.roomId);
 
@@ -169,9 +218,8 @@ export default class AppsDrawer extends React.Component {
                 fullWidth={arr.length < 2}
                 room={this.props.room}
                 userId={this.props.userId}
-                show={this.props.showApps}
                 creatorUserId={app.creatorUserId}
-                widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
+                widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}
                 whitelistCapabilities={capWhitelist}
             />);
@@ -181,21 +229,6 @@ export default class AppsDrawer extends React.Component {
             return <div />;
         }
 
-        let addWidget;
-        if (this.props.showApps &&
-            this._canUserModify()
-        ) {
-            addWidget = <AccessibleButton
-                onClick={this.onClickAddWidget}
-                className={this.state.apps.length<2 ?
-                    'mx_AddWidget_button mx_AddWidget_button_full_width' :
-                    'mx_AddWidget_button'
-                }
-                title={_t('Add a widget')}>
-                [+] { _t('Add a widget') }
-            </AccessibleButton>;
-        }
-
         let spinner;
         if (
             apps.length === 0 && WidgetEchoStore.roomHasPendingWidgets(
@@ -208,10 +241,11 @@ export default class AppsDrawer extends React.Component {
         }
 
         const classes = classNames({
-            "mx_AppsDrawer": true,
-            "mx_AppsDrawer_hidden": this.props.hide,
-            "mx_AppsDrawer_fullWidth": apps.length < 2,
-            "mx_AppsDrawer_minimised": !this.props.showApps,
+            mx_AppsDrawer: true,
+            mx_AppsDrawer_fullWidth: apps.length < 2,
+            mx_AppsDrawer_resizing: this.state.resizing,
+            mx_AppsDrawer_2apps: apps.length === 2,
+            mx_AppsDrawer_3apps: apps.length === 3,
         });
 
         return (
@@ -221,13 +255,20 @@ export default class AppsDrawer extends React.Component {
                     minHeight={100}
                     maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined}
                     handleClass="mx_AppsContainer_resizerHandle"
-                    className="mx_AppsContainer"
+                    className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >
-                    { apps }
-                    { spinner }
+                    <div className="mx_AppsContainer" ref={this._collectResizer}>
+                        { apps.map((app, i) => {
+                            if (i < 1) return app;
+                            return <React.Fragment key={app.key}>
+                                <ResizeHandle reverse={i > apps.length / 2} />
+                                { app }
+                            </React.Fragment>;
+                        }) }
+                    </div>
                 </PersistentVResizer>
-                { this._canUserModify() && addWidget }
+                { spinner }
             </div>
         );
     }
@@ -243,15 +284,13 @@ const PersistentVResizer = ({
     resizeNotifier,
     children,
 }) => {
-    const [height, setHeight] = useLocalStorageState("pvr_" + id, 100);
-    const [resizing, setResizing] = useState(false);
+    const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px
 
     return <Resizable
         size={{height: Math.min(height, maxHeight)}}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {
-            if (!resizing) setResizing(true);
             resizeNotifier.startResizing();
         }}
         onResize={() => {
@@ -259,14 +298,11 @@ const PersistentVResizer = ({
         }}
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
-            if (resizing) setResizing(false);
             resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}
-        className={classNames(className, {
-            mx_AppsDrawer_resizing: resizing,
-        })}
+        className={className}
         enable={{bottom: true}}
     >
         { children }

src/components/views/rooms/AuxPanel.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2015, 2016, 2017, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,8 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { Room } from 'matrix-js-sdk/src/models/room'
 import * as sdk from '../../../index';
 import dis from "../../../dispatcher/dispatcher";
 import * as ObjectUtils from '../../../ObjectUtils';
@@ -28,38 +27,45 @@ import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import CallView from "../voip/CallView";
+import {UIFeature} from "../../../settings/UIFeature";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 
+interface IProps {
+    // js-sdk room object
+    room: Room,
+    userId: string,
+    showApps: boolean, // Render apps
 
-export default class AuxPanel extends React.Component {
-    static propTypes = {
-        // js-sdk room object
-        room: PropTypes.object.isRequired,
-        userId: PropTypes.string.isRequired,
-        showApps: PropTypes.bool, // Render apps
-        hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
+    // set to true to show the file drop target
+    draggingFile: boolean,
 
-        // Conference Handler implementation
-        conferenceHandler: PropTypes.object,
+    // maxHeight attribute for the aux panel and the video
+    // therein
+    maxHeight: number,
 
-        // set to true to show the file drop target
-        draggingFile: PropTypes.bool,
+    // a callback which is called when the content of the aux panel changes
+    // content in a way that is likely to make it change size.
+    onResize: () => void,
+    fullHeight: boolean,
 
-        // set to true to show the 'active conf call' banner
-        displayConfCallNotification: PropTypes.bool,
+    resizeNotifier: ResizeNotifier,
+}
 
-        // maxHeight attribute for the aux panel and the video
-        // therein
-        maxHeight: PropTypes.number,
+interface Counter {
+    title: string,
+    value: number,
+    link: string,
+    severity: string,
+    stateKey: string,
+}
 
-        // a callback which is called when the content of the aux panel changes
-        // content in a way that is likely to make it change size.
-        onResize: PropTypes.func,
-        fullHeight: PropTypes.bool,
-    };
+interface IState {
+    counters: Counter[],
+}
 
+export default class AuxPanel extends React.Component<IProps, IState> {
     static defaultProps = {
         showApps: true,
-        hideAppsDrawer: false,
     };
 
     constructor(props) {
@@ -111,7 +117,7 @@ export default class AuxPanel extends React.Component {
     }, 500);
 
     _computeCounters() {
-        let counters = [];
+        const counters = [];
 
         if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
             const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
@@ -119,7 +125,7 @@ export default class AuxPanel extends React.Component {
                 return a.getStateKey() < b.getStateKey();
             });
 
-            stateEvs.forEach((ev, idx) => {
+            for (const ev of stateEvs) {
                 const title = ev.getContent().title;
                 const value = ev.getContent().value;
                 const link = ev.getContent().link;
@@ -130,14 +136,14 @@ export default class AuxPanel extends React.Component {
                 // zero)
                 if (title && value !== undefined) {
                     counters.push({
-                        "title": title,
-                        "value": value,
-                        "link": link,
-                        "severity": severity,
-                        "stateKey": stateKey
+                        title,
+                        value,
+                        link,
+                        severity,
+                        stateKey,
                     })
                 }
-            });
+            }
         }
 
         return counters;
@@ -150,8 +156,7 @@ export default class AuxPanel extends React.Component {
         if (this.props.draggingFile) {
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
-                    <div className="mx_RoomView_fileDropTargetLabel"
-                      title={_t("Drop File Here")}>
+                    <div className="mx_RoomView_fileDropTargetLabel" title={_t("Drop File Here")}>
                         <TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
                         <br />
                         { _t("Drop file here to upload") }
@@ -160,56 +165,28 @@ export default class AuxPanel extends React.Component {
             );
         }
 
-        let conferenceCallNotification = null;
-        if (this.props.displayConfCallNotification) {
-            let supportedText = '';
-            let joinNode;
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                supportedText = _t(" (unsupported)");
-            } else {
-                joinNode = (<span>
-                    { _t(
-                        "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
-                        {},
-                        {
-                            'voiceText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>,
-                            'videoText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>,
-                        },
-                    ) }
-                </span>);
-            }
-            // XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
-            // but there are translations for this in the languages we do have so I'm leaving it for now.
-            conferenceCallNotification = (
-                <div className="mx_RoomView_ongoingConfCallNotification">
-                    { _t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText}) }
-                    &nbsp;
-                    { joinNode }
-                </div>
-            );
-        }
-
         const callView = (
             <CallView
                 room={this.props.room}
-                ConferenceHandler={this.props.conferenceHandler}
                 onResize={this.props.onResize}
                 maxVideoHeight={this.props.maxHeight}
             />
         );
 
-        const appsDrawer = <AppsDrawer
-            room={this.props.room}
-            userId={this.props.userId}
-            maxHeight={this.props.maxHeight}
-            showApps={this.props.showApps}
-            hide={this.props.hideAppsDrawer}
-            resizeNotifier={this.props.resizeNotifier}
-        />;
+        let appsDrawer;
+        if (SettingsStore.getValue(UIFeature.Widgets)) {
+            appsDrawer = <AppsDrawer
+                room={this.props.room}
+                userId={this.props.userId}
+                maxHeight={this.props.maxHeight}
+                showApps={this.props.showApps}
+                resizeNotifier={this.props.resizeNotifier}
+            />;
+        }
 
         let stateViews = null;
         if (this.state.counters && SettingsStore.getValue("feature_state_counters")) {
-            let counters = [];
+            const counters = [];
 
             this.state.counters.forEach((counter, idx) => {
                 const title = counter.title;
@@ -218,7 +195,7 @@ export default class AuxPanel extends React.Component {
                 const severity = counter.severity;
                 const stateKey = counter.stateKey;
 
-                let span = <span>{ title }: { value }</span>
+                let span = <span>{ title }: { value }</span>;
 
                 if (link) {
                     span = (
@@ -243,7 +220,7 @@ export default class AuxPanel extends React.Component {
                     <span
                         className="m_RoomView_auxPanel_stateViews_delim"
                         key={"delim" + idx}
-                    > ─ </span>
+                    > ─ </span>,
                 );
             });
 
@@ -261,7 +238,7 @@ export default class AuxPanel extends React.Component {
             "mx_RoomView_auxPanel": true,
             "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
         });
-        const style = {};
+        const style: React.CSSProperties = {};
         if (!this.props.fullHeight) {
             style.maxHeight = this.props.maxHeight;
         }
@@ -272,7 +249,6 @@ export default class AuxPanel extends React.Component {
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }
-                { conferenceCallNotification }
                 { this.props.children }
             </AutoHideScrollbar>
         );

src/components/views/rooms/BasicMessageComposer.tsx

@@ -92,7 +92,7 @@ interface IProps {
     label?: string;
     initialCaret?: DocumentOffset;
 
-    onChange();
+    onChange?();
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
 }
 
@@ -207,7 +207,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         // If the user is entering a command, only consider them typing if it is one which sends a message into the room
         if (isTyping && this.props.model.parts[0].type === "command") {
             const {cmd} = parseCommandString(this.props.model.parts[0].text);
-            if (!CommandMap.has(cmd) || CommandMap.get(cmd).category !== CommandCategories.messages) {
+            const command = CommandMap.get(cmd);
+            if (!command || !command.isEnabled() || command.category !== CommandCategories.messages) {
                 isTyping = false;
             }
         }
@@ -618,13 +619,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     private onFormatAction = (action: Formatting) => {
-        const range = getRangeForSelection(
-            this.editorRef.current,
-            this.props.model,
-            document.getSelection());
+        const range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
+        // trim the range as we want it to exclude leading/trailing spaces
+        range.trim();
+
         if (range.length === 0) {
             return;
         }
+
         this.historyManager.ensureLastChangesPushed(this.props.model);
         this.modifiedFlag = true;
         switch (action) {

src/components/views/rooms/EditMessageComposer.js

@@ -33,6 +33,7 @@ import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
 import SettingsStore from "../../../settings/SettingsStore";
+import CountlyAnalytics from "../../../CountlyAnalytics";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -186,6 +187,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _sendEdit = () => {
+        const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
@@ -194,8 +196,9 @@ export default class EditMessageComposer extends React.Component {
         if (this._isContentModified(newContent)) {
             const roomId = editedEvent.getRoomId();
             this._cancelPreviousPendingEdit();
-            this.context.sendMessage(roomId, editContent);
+            const prom = this.context.sendMessage(roomId, editContent);
             dis.dispatch({action: "message_sent"});
+            CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
         }
 
         // close the event editing and focus composer

src/components/views/rooms/EventTile.js

@@ -21,6 +21,7 @@ import ReplyThread from "../elements/ReplyThread";
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from "classnames";
+import {EventType} from "matrix-js-sdk/src/@types/event";
 import { _t, _td } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
@@ -34,6 +35,8 @@ import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
+import {WidgetType} from "../../../widgets/WidgetType";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
@@ -44,6 +47,7 @@ const eventTileTypes = {
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
+    'm.call.reject': 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
@@ -110,6 +114,19 @@ export function getHandlerTile(ev) {
         }
     }
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
+    if (type === "im.vector.modular.widgets") {
+        let type = ev.getContent()['type'];
+        if (!type) {
+            // deleted/invalid widget - try the past widget type
+            type = ev.getPrevContent()['type'];
+        }
+
+        if (WidgetType.JITSI.matches(type)) {
+            return "messages.MJitsiWidgetEvent";
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -147,6 +164,10 @@ export default class EventTile extends React.Component {
          */
         last: PropTypes.bool,
 
+        // true if the event is the last event in a section (adds a css class for
+        // targeting)
+        lastInSection: PropTypes.bool,
+
         /* true if this is search context (which has the effect of greying out
          * the text
          */
@@ -206,6 +227,9 @@ export default class EventTile extends React.Component {
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
+
+        // whether or not to show flair at all
+        enableFlair: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -619,22 +643,24 @@ export default class EventTile extends React.Component {
         const msgtype = content.msgtype;
         const eventType = this.props.mxEvent.getType();
 
+        let tileHandler = getHandlerTile(this.props.mxEvent);
+
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
-            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
-            (eventType === "m.room.encryption");
+            (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
+            (eventType === EventType.RoomCreate) ||
+            (eventType === EventType.RoomEncryption) ||
+            (tileHandler === "messages.MJitsiWidgetEvent");
         let isInfoMessage = (
-            !isBubbleMessage && eventType !== 'm.room.message' &&
-            eventType !== 'm.sticker' && eventType !== 'm.room.create'
+            !isBubbleMessage && eventType !== EventType.RoomMessage &&
+            eventType !== EventType.Sticker && eventType !== EventType.RoomCreate
         );
 
-        let tileHandler = getHandlerTile(this.props.mxEvent);
         // If we're showing hidden events in the timeline, we should use the
         // source tile when there's no regular tile for an event and also for
         // replace relations (which otherwise would display as a confusing
         // duplicate of the thing they are replacing).
-        const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace");
-        if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+        if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
             tileHandler = "messages.ViewSourceEvent";
             // Reuse info message avatar and sender profile styling
             isInfoMessage = true;
@@ -670,6 +696,7 @@ export default class EventTile extends React.Component {
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
             mx_EventTile_last: this.props.last,
+            mx_EventTile_lastInSection: this.props.lastInSection,
             mx_EventTile_contextual: this.props.contextual,
             mx_EventTile_actionBarFocused: this.state.actionBarFocused,
             mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED,
@@ -736,10 +763,10 @@ export default class EventTile extends React.Component {
                 else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                                         mxEvent={this.props.mxEvent}
-                                        enableFlair={!text}
+                                        enableFlair={this.props.enableFlair && !text}
                                         text={text} />;
             } else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={true} />;
+                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }
         }
 
@@ -818,6 +845,7 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_roomName">
+                            <RoomAvatar room={room} width={28} height={28} />
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
                             </a>
@@ -892,6 +920,7 @@ export default class EventTile extends React.Component {
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            onHeightChanged={this.props.onHeightChanged}
+                                           replacingEventId={this.props.replacingEventId}
                                            showUrlPreview={false} />
                         </div>
                     </div>
@@ -1027,11 +1056,7 @@ class E2ePadlock extends React.Component {
             tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
         }
 
-        let classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
-        if (!SettingsStore.getValue("alwaysShowEncryptionIcons")) {
-            classes += ' mx_EventTile_e2eIcon_hidden';
-        }
-
+        const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
         return (
             <div
                 className={classes}

src/components/views/rooms/ForwardMessage.js

@@ -18,7 +18,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher/dispatcher';
 import {Key} from '../../../Keyboard';
 
 
@@ -28,19 +27,10 @@ export default class ForwardMessage extends React.Component {
     };
 
     componentDidMount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: true,
-        });
-
         document.addEventListener('keydown', this._onKeyDown);
     }
 
     componentWillUnmount() {
-        dis.dispatch({
-            action: 'panel_disable',
-            middleDisabled: false,
-        });
         document.removeEventListener('keydown', this._onKeyDown);
     }
 

src/components/views/rooms/LinkPreviewWidget.js

@@ -114,7 +114,10 @@ export default class LinkPreviewWidget extends React.Component {
 
         let thumbHeight = imageMaxHeight;
         if (p["og:image:width"] && p["og:image:height"]) {
-            thumbHeight = ImageUtils.thumbHeight(p["og:image:width"], p["og:image:height"], imageMaxWidth, imageMaxHeight);
+            thumbHeight = ImageUtils.thumbHeight(
+                p["og:image:width"], p["og:image:height"],
+                imageMaxWidth, imageMaxHeight,
+            );
         }
 
         let img;

src/components/views/rooms/MemberList.js

@@ -20,13 +20,13 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher/dispatcher';
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {isValid3pidInvite} from "../../../RoomInvite";
 import rate_limited_func from "../../../ratelimitedfunc";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import * as sdk from "../../../index";
-import CallHandler from "../../../CallHandler";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import BaseCard from "../right_panel/BaseCard";
+import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -121,8 +121,8 @@ export default class MemberList extends React.Component {
                     this.setState(this._getMembersState(this.roomMembers()));
                     this._listenForMembersChanges();
                 }
-            } else if (membership === "invite") {
-                // show the members we've got when invited
+            } else {
+                // show the members we already have loaded
                 this.setState(this._getMembersState(this.roomMembers()));
             }
         }
@@ -232,15 +232,10 @@ export default class MemberList extends React.Component {
     }
 
     roomMembers() {
-        const ConferenceHandler = CallHandler.getConferenceHandler();
-
         const allMembers = this.getMembersWithUser();
         const filteredAndSortedMembers = allMembers.filter((m) => {
             return (
                 m.membership === 'join' || m.membership === 'invite'
-            ) && (
-                !ConferenceHandler ||
-                (ConferenceHandler && !ConferenceHandler.isConferenceUser(m.userId))
             );
         });
         filteredAndSortedMembers.sort(this.memberSort);
@@ -438,7 +433,13 @@ export default class MemberList extends React.Component {
     render() {
         if (this.state.loading) {
             const Spinner = sdk.getComponent("elements.Spinner");
-            return <div className="mx_MemberList"><Spinner /></div>;
+            return <BaseCard
+                className="mx_MemberList"
+                onClose={this.props.onClose}
+                previousPhase={RightPanelPhases.RoomSummary}
+            >
+                <Spinner />
+            </BaseCard>;
         }
 
         const SearchBox = sdk.getComponent('structures.SearchBox');
@@ -485,25 +486,29 @@ export default class MemberList extends React.Component {
                 />;
         }
 
-        return (
-            <div className="mx_MemberList" role="tabpanel">
-                { inviteButton }
-                <AutoHideScrollbar>
-                    <div className="mx_MemberList_wrapper">
-                        <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
-                            createOverflowElement={this._createOverflowTileJoined}
-                            getChildren={this._getChildrenJoined}
-                            getChildCount={this._getChildCountJoined} />
-                        { invitedHeader }
-                        { invitedSection }
-                    </div>
-                </AutoHideScrollbar>
-
-                <SearchBox className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
-                           placeholder={ _t('Filter room members') }
-                           onSearch={ this.onSearchQueryChanged } />
-            </div>
+        const footer = (
+            <SearchBox
+                className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
+                placeholder={ _t('Filter room members') }
+                onSearch={ this.onSearchQueryChanged } />
         );
+
+        return <BaseCard
+            className="mx_MemberList"
+            header={inviteButton}
+            footer={footer}
+            onClose={this.props.onClose}
+            previousPhase={RightPanelPhases.RoomSummary}
+        >
+            <div className="mx_MemberList_wrapper">
+                <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
+                               createOverflowElement={this._createOverflowTileJoined}
+                               getChildren={this._getChildrenJoined}
+                               getChildCount={this._getChildCountJoined} />
+                { invitedHeader }
+                { invitedSection }
+            </div>
+        </BaseCard>;
     }
 
     onInviteButtonClick = () => {

src/components/views/rooms/MessageComposer.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2020 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.
@@ -22,7 +23,6 @@ import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import RoomViewStore from '../../../stores/RoomViewStore';
 import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
@@ -31,6 +31,13 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
+import {UIFeature} from "../../../settings/UIFeature";
+import WidgetStore from "../../../stores/WidgetStore";
+import WidgetUtils from "../../../utils/WidgetUtils";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
+import { PlaceCallType } from "../../../CallHandler";
+import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -47,7 +54,7 @@ function CallButton(props) {
     const onVoiceCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
-            type: "voice",
+            type: PlaceCallType.Voice,
             room_id: props.roomId,
         });
     };
@@ -67,7 +74,7 @@ function VideoCallButton(props) {
     const onCallClick = (ev) => {
         dis.dispatch({
             action: 'place_call',
-            type: ev.shiftKey ? "screensharing" : "video",
+            type: ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video,
             room_id: props.roomId,
         });
     };
@@ -84,27 +91,51 @@ VideoCallButton.propTypes = {
 };
 
 function HangupButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
     const onHangupClick = () => {
-        const call = CallHandler.getCallForRoom(props.roomId);
+        if (props.isConference) {
+            dis.dispatch({
+                action: props.canEndConference ? 'end_conference' : 'hangup_conference',
+                room_id: props.roomId,
+            });
+            return;
+        }
+
+        const call = CallHandler.sharedInstance().getCallForRoom(props.roomId);
         if (!call) {
             return;
         }
+
+        const action = call.state === CallState.Ringing ? 'reject' : 'hangup';
+
         dis.dispatch({
-            action: 'hangup',
+            action,
             // hangup the call for this room, which may not be the room in props
             // (e.g. conferences which will hangup the 1:1 room instead)
             room_id: call.roomId,
         });
     };
-    return (<AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
+
+    let tooltip = _t("Hangup");
+    if (props.isConference && props.canEndConference) {
+        tooltip = _t("End conference");
+    }
+
+    const canLeaveConference = !props.isConference ? true : props.isInConference;
+    return (
+        <AccessibleTooltipButton
+            className="mx_MessageComposer_button mx_MessageComposer_hangup"
             onClick={onHangupClick}
-            title={_t('Hangup')}
-        />);
+            title={tooltip}
+            disabled={!canLeaveConference}
+        />
+    );
 }
 
 HangupButton.propTypes = {
     roomId: PropTypes.string.isRequired,
+    isConference: PropTypes.bool.isRequired,
+    canEndConference: PropTypes.bool,
+    isInConference: PropTypes.bool,
 };
 
 const EmojiButton = ({addEmoji}) => {
@@ -222,15 +253,18 @@ export default class MessageComposer extends React.Component {
         super(props);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
         this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
         this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
+        WidgetStore.instance.on(UPDATE_EVENT, this._onWidgetUpdate);
+        ActiveWidgetStore.on('update', this._onActiveWidgetUpdate);
         this._dispatcherRef = null;
+
         this.state = {
-            isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
             tombstone: this._getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
             showCallButtons: SettingsStore.getValue("showCallButtonsInComposer"),
+            hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
+            joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
         };
     }
 
@@ -246,10 +280,17 @@ export default class MessageComposer extends React.Component {
         }
     };
 
+    _onWidgetUpdate = () => {
+        this.setState({hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room)});
+    };
+
+    _onActiveWidgetUpdate = () => {
+        this.setState({joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room)});
+    };
+
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._waitForOwnMember();
     }
 
@@ -273,9 +314,8 @@ export default class MessageComposer extends React.Component {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
         }
-        if (this._roomStoreToken) {
-            this._roomStoreToken.remove();
-        }
+        WidgetStore.instance.removeListener(UPDATE_EVENT, this._onWidgetUpdate);
+        ActiveWidgetStore.removeListener('update', this._onActiveWidgetUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
@@ -294,12 +334,6 @@ export default class MessageComposer extends React.Component {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
     }
 
-    _onRoomViewStoreUpdate() {
-        const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
-        if (this.state.isQuoting === isQuoting) return;
-        this.setState({ isQuoting });
-    }
-
     onInputStateChanged(inputState) {
         // Merge the new input state with old to support partial updates
         inputState = Object.assign({}, this.state.inputState, inputState);
@@ -324,6 +358,7 @@ export default class MessageComposer extends React.Component {
             event_id: createEventId,
             room_id: replacementRoomId,
             auto_join: true,
+            _type: "tombstone", // instrumentation
 
             // Try to join via the server that sent the event. This converts @something:example.org
             // into a server domain by splitting on colons and ignoring the first entry ("@something").
@@ -336,7 +371,7 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (this.state.isQuoting) {
+        if (this.props.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
             } else {
@@ -381,16 +416,32 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     resizeNotifier={this.props.resizeNotifier}
-                    permalinkCreator={this.props.permalinkCreator} />,
+                    permalinkCreator={this.props.permalinkCreator}
+                    replyToEvent={this.props.replyToEvent}
+                />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
-                <Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />,
             );
 
+            if (SettingsStore.getValue(UIFeature.Widgets)) {
+                controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
+            }
+
             if (this.state.showCallButtons) {
-                if (callInProgress) {
+                if (this.state.hasConference) {
+                    const canEndConf = WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
                     controls.push(
-                        <HangupButton key="controls_hangup" roomId={this.props.room.roomId} />,
+                        <HangupButton
+                            key="controls_hangup"
+                            roomId={this.props.room.roomId}
+                            isConference={true}
+                            canEndConference={canEndConf}
+                            isInConference={this.state.joinedConference}
+                        />,
+                    );
+                } else if (callInProgress) {
+                    controls.push(
+                        <HangupButton key="controls_hangup" roomId={this.props.room.roomId} isConference={false} />,
                     );
                 } else {
                     controls.push(

src/components/views/rooms/NewRoomIntro.tsx

@@ -0,0 +1,135 @@
+/*
+Copyright 2020 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} from "react";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import MiniAvatarUploader, {AVATAR_SIZE} from "../elements/MiniAvatarUploader";
+import RoomAvatar from "../avatars/RoomAvatar";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
+import {Action} from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
+
+const NewRoomIntro = () => {
+    const cli = useContext(MatrixClientContext);
+    const {room, roomId} = useContext(RoomContext);
+
+    const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+    let body;
+    if (dmPartner) {
+        let caption;
+        if ((room.getJoinedMemberCount() + room.getInvitedMemberCount()) === 2) {
+            caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
+        }
+
+        const member = room?.getMember(dmPartner);
+        const displayName = member?.rawDisplayName || dmPartner;
+        body = <React.Fragment>
+            <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} onClick={() => {
+                defaultDispatcher.dispatch<ViewUserPayload>({
+                    action: Action.ViewUser,
+                    // XXX: We should be using a real member object and not assuming what the receiver wants.
+                    member: member || {userId: dmPartner},
+                });
+            }} />
+
+            <h2>{ room.name }</h2>
+
+            <p>{_t("This is the beginning of your direct message history with <displayName/>.", {}, {
+                displayName: () => <b>{ displayName }</b>,
+            })}</p>
+            { caption && <p>{ caption }</p> }
+        </React.Fragment>;
+    } else {
+        const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
+        const canAddTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
+
+        const onTopicClick = () => {
+            dis.dispatch({
+                action: "open_room_settings",
+                room_id: roomId,
+            }, true);
+            // focus the topic field to help the user find it as it'll gain an outline
+            setImmediate(() => {
+                window.document.getElementById("profileTopic").focus();
+            });
+        };
+
+        let topicText;
+        if (canAddTopic && topic) {
+            topicText = _t("Topic: %(topic)s (<a>edit</a>)", { topic }, {
+                a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
+            });
+        } else if (topic) {
+            topicText = _t("Topic: %(topic)s ", { topic });
+        } else if (canAddTopic) {
+            topicText = _t("<a>Add a topic</a> to help people know what it is about.", {}, {
+                a: sub => <AccessibleButton kind="link" onClick={onTopicClick}>{ sub }</AccessibleButton>,
+            });
+        }
+
+        const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+        const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+
+        let createdText;
+        if (creator === cli.getUserId()) {
+            createdText = _t("You created this room.");
+        } else {
+            createdText = _t("%(displayName)s created this room.", {
+                displayName: creatorName,
+            });
+        }
+
+        const onInviteClick = () => {
+            dis.dispatch({ action: "view_invite", roomId });
+        };
+
+        const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
+        body = <React.Fragment>
+            <MiniAvatarUploader
+                hasAvatar={!!avatarUrl}
+                noAvatarLabel={_t("Add a photo, so people can easily spot your room.")}
+                setAvatarUrl={url => cli.sendStateEvent(roomId, EventType.RoomAvatar, { url }, '')}
+            >
+                <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} />
+            </MiniAvatarUploader>
+
+            <h2>{ room.name }</h2>
+
+            <p>{createdText} {_t("This is the start of <roomName/>.", {}, {
+                roomName: () => <b>{ room.name }</b>,
+            })}</p>
+            <p>{topicText}</p>
+            <div className="mx_NewRoomIntro_buttons">
+                <AccessibleButton className="mx_NewRoomIntro_inviteButton" kind="primary" onClick={onInviteClick}>
+                    {_t("Invite to this room")}
+                </AccessibleButton>
+            </div>
+        </React.Fragment>;
+    }
+
+    return <div className="mx_NewRoomIntro">
+        { body }
+    </div>;
+};
+
+export default NewRoomIntro;

src/components/views/rooms/NotificationBadge.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import classNames from "classnames";
-import { formatMinimalBadgeCount } from "../../../utils/FormattingUtils";
+import { formatCount } from "../../../utils/FormattingUtils";
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
@@ -109,7 +109,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
             if (!notification.hasUnreadCount) return null; // Can't render a badge
         }
 
-        let symbol = notification.symbol || formatMinimalBadgeCount(notification.count);
+        let symbol = notification.symbol || formatCount(notification.count);
         if (isEmptyBadge) symbol = "";
 
         const classes = classNames({

src/components/views/rooms/ReplyPreview.js

@@ -22,6 +22,7 @@ import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import PropTypes from "prop-types";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import {UIFeature} from "../../../settings/UIFeature";
 
 function cancelQuoting() {
     dis.dispatch({
@@ -80,11 +81,14 @@ export default class ReplyPreview extends React.Component {
                          onClick={cancelQuoting} />
                 </div>
                 <div className="mx_ReplyPreview_clear" />
-                <EventTile last={true}
-                           tileShape="reply_preview"
-                           mxEvent={this.state.event}
-                           permalinkCreator={this.props.permalinkCreator}
-                           isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                <EventTile
+                    last={true}
+                    tileShape="reply_preview"
+                    mxEvent={this.state.event}
+                    permalinkCreator={this.props.permalinkCreator}
+                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                    enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                />
             </div>
         </div>;
     }

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -76,7 +76,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
     };
 
     private viewRoom = (room: Room, index: number) => {
-        Analytics.trackEvent("Breadcrumbs", "click_node", index);
+        Analytics.trackEvent("Breadcrumbs", "click_node", String(index));
         defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId});
     };
 

src/components/views/rooms/RoomHeader.js

@@ -18,14 +18,11 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import Modal from "../../../Modal";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
 import { linkifyElement } from '../../../HtmlUtils';
-import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
@@ -45,6 +42,8 @@ export default class RoomHeader extends React.Component {
         onLeaveClick: PropTypes.func,
         onCancelClick: PropTypes.func,
         e2eStatus: PropTypes.string,
+        onAppsClick: PropTypes.func,
+        appsShown: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -114,13 +113,6 @@ export default class RoomHeader extends React.Component {
         this.forceUpdate();
     };
 
-    onShareRoomClick = (ev) => {
-        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
-        Modal.createTrackedDialog('share room dialog', '', ShareDialog, {
-            target: this.props.room,
-        });
-    };
-
     _hasUnreadPins() {
         const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
         if (!currentPinEvent) return false;
@@ -150,7 +142,6 @@ export default class RoomHeader extends React.Component {
     render() {
         let searchStatus = null;
         let cancelButton = null;
-        let settingsButton = null;
         let pinnedEventsButton = null;
 
         if (this.props.onCancelClick) {
@@ -214,14 +205,6 @@ export default class RoomHeader extends React.Component {
             />;
         }
 
-        if (this.props.onSettingsClick) {
-            settingsButton =
-                <AccessibleTooltipButton
-                    className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
-                    onClick={this.props.onSettingsClick}
-                    title={_t("Settings")} />;
-        }
-
         if (this.props.onPinnedClick && SettingsStore.getValue('feature_pinning')) {
             let pinsIndicator = null;
             if (this._hasUnreadPins()) {
@@ -249,6 +232,17 @@ export default class RoomHeader extends React.Component {
                     title={_t("Forget room")} />;
         }
 
+        let appsButton;
+        if (this.props.onAppsClick) {
+            appsButton =
+                <AccessibleTooltipButton
+                    className={classNames("mx_RoomHeader_button mx_RoomHeader_appsButton", {
+                        mx_RoomHeader_appsButton_highlight: this.props.appsShown,
+                    })}
+                    onClick={this.props.onAppsClick}
+                    title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} />;
+        }
+
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
@@ -258,27 +252,11 @@ export default class RoomHeader extends React.Component {
                     title={_t("Search")} />;
         }
 
-        let shareRoomButton;
-        if (this.props.inRoom) {
-            shareRoomButton =
-                <AccessibleTooltipButton
-                    className="mx_RoomHeader_button mx_RoomHeader_shareButton"
-                    onClick={this.onShareRoomClick}
-                    title={_t('Share room')} />;
-        }
-
-        let manageIntegsButton;
-        if (this.props.room && this.props.room.roomId && this.props.inRoom) {
-            manageIntegsButton = <ManageIntegsButton room={this.props.room} />;
-        }
-
         const rightRow =
             <div className="mx_RoomHeader_buttons">
-                { settingsButton }
                 { pinnedEventsButton }
-                { shareRoomButton }
-                { manageIntegsButton }
                 { forgetButton }
+                { appsButton }
                 { searchButton }
             </div>;