Merge branch 'develop' into export-conversations

src/components/views/audio_messages/Clock.tsx

@@ -15,34 +15,30 @@ limitations under the License.
 */
 
 import React from "react";
+import { formatSeconds } from "../../../DateUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export interface IProps {
     seconds: number;
 }
 
-interface IState {
-}
-
 /**
  * Simply converts seconds into minutes and seconds. Note that hours will not be
  * displayed, making it possible to see "82:29".
  */
 @replaceableComponent("views.audio_messages.Clock")
-export default class Clock extends React.Component<IProps, IState> {
+export default class Clock extends React.Component<IProps> {
     public constructor(props) {
         super(props);
     }
 
-    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+    shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
         const currentFloor = Math.floor(this.props.seconds);
         const nextFloor = Math.floor(nextProps.seconds);
         return currentFloor !== nextFloor;
     }
 
     public render() {
-        const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
-        const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
-        return <span className='mx_Clock'>{ minutes }:{ seconds }</span>;
+        return <span className='mx_Clock'>{ formatSeconds(this.props.seconds) }</span>;
     }
 }

src/components/views/auth/CaptchaForm.tsx

@@ -19,6 +19,8 @@ import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 const DIV_ID = 'mx_recaptcha';
 
 interface ICaptchaFormProps {
@@ -60,7 +62,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
             // already loaded
             this.onCaptchaLoaded();
         } else {
-            console.log("Loading recaptcha script...");
+            logger.log("Loading recaptcha script...");
             window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); };
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
@@ -109,7 +111,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
     }
 
     private onCaptchaLoaded() {
-        console.log("Loaded recaptcha script.");
+        logger.log("Loaded recaptcha script.");
         try {
             this.renderRecaptcha(DIV_ID);
             // clear error if re-rendered

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -29,6 +29,8 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
 import Field from '../elements/Field';
 import CaptchaForm from "./CaptchaForm";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
  * for an auth stage. (The intention is that they could also be used for other
@@ -555,7 +557,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
             }
         } catch (e) {
             this.props.fail(e);
-            console.log("Failed to submit msisdn token");
+            logger.log("Failed to submit msisdn token");
         }
     };
 

src/components/views/avatars/MemberAvatar.tsx

@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
+    style?: any;
 }
 
 interface IState {

src/components/views/avatars/MemberStatusMessageAvatar.tsx

@@ -15,43 +15,48 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MemberAvatar from '../avatars/MemberAvatar';
 import classNames from 'classnames';
 import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
-import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
+
+interface IProps {
+    member: RoomMember;
+    width?: number;
+    height?: number;
+    resizeMethod?: ResizeMethod;
+}
+
+interface IState {
+    hasStatus: boolean;
+    menuDisplayed: boolean;
+}
 
 @replaceableComponent("views.avatars.MemberStatusMessageAvatar")
-export default class MemberStatusMessageAvatar extends React.Component {
-    static propTypes = {
-        member: PropTypes.object.isRequired,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-    };
-
-    static defaultProps = {
+export default class MemberStatusMessageAvatar extends React.Component<IProps, IState> {
+    public static defaultProps: Partial<IProps> = {
         width: 40,
         height: 40,
         resizeMethod: 'crop',
     };
+    private button = createRef<HTMLDivElement>();
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
             hasStatus: this.hasStatus,
             menuDisplayed: false,
         };
-
-        this._button = createRef();
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }
@@ -62,44 +67,44 @@ export default class MemberStatusMessageAvatar extends React.Component {
         if (!user) {
             return;
         }
-        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+        user.on("User._unstable_statusMessage", this.onStatusMessageCommitted);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const { user } = this.props.member;
         if (!user) {
             return;
         }
         user.removeListener(
             "User._unstable_statusMessage",
-            this._onStatusMessageCommitted,
+            this.onStatusMessageCommitted,
         );
     }
 
-    get hasStatus() {
+    private get hasStatus(): boolean {
         const { user } = this.props.member;
         if (!user) {
             return false;
         }
-        return !!user._unstable_statusMessage;
+        return !!user.unstable_statusMessage;
     }
 
-    _onStatusMessageCommitted = () => {
+    private onStatusMessageCommitted = (): void => {
         // The `User` object has observed a status message change.
         this.setState({
             hasStatus: this.hasStatus,
         });
     };
 
-    openMenu = () => {
+    private openMenu = (): void => {
         this.setState({ menuDisplayed: true });
     };
 
-    closeMenu = () => {
+    private closeMenu = (): void => {
         this.setState({ menuDisplayed: false });
     };
 
-    render() {
+    public render(): JSX.Element {
         const avatar = <MemberAvatar
             member={this.props.member}
             width={this.props.width}
@@ -118,7 +123,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
 
         let contextMenu;
         if (this.state.menuDisplayed) {
-            const elementRect = this._button.current.getBoundingClientRect();
+            const elementRect = this.button.current.getBoundingClientRect();
 
             const chevronWidth = 16; // See .mx_ContextualMenu_chevron_bottom
             const chevronMargin = 1; // Add some spacing away from target
@@ -126,13 +131,13 @@ export default class MemberStatusMessageAvatar extends React.Component {
             contextMenu = (
                 <ContextMenu
                     chevronOffset={(elementRect.width - chevronWidth) / 2}
-                    chevronFace="bottom"
+                    chevronFace={ChevronFace.Bottom}
                     left={elementRect.left + window.pageXOffset}
                     top={elementRect.top + window.pageYOffset - chevronMargin}
                     menuWidth={226}
                     onFinished={this.closeMenu}
                 >
-                    <StatusMessageContextMenu user={this.props.member.user} onFinished={this.closeMenu} />
+                    <StatusMessageContextMenu user={this.props.member.user} />
                 </ContextMenu>
             );
         }
@@ -140,7 +145,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         return <React.Fragment>
             <ContextMenuButton
                 className={classes}
-                inputRef={this._button}
+                inputRef={this.button}
                 onClick={this.openMenu}
                 isExpanded={this.state.menuDisplayed}
                 label={_t("User Status")}

src/components/views/context_menus/GenericElementContextMenu.tsx

@@ -15,45 +15,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-/*
+interface IProps {
+    element: React.ReactNode;
+    // Function to be called when the parent window is resized
+    // This can be used to reposition or close the menu on resize and
+    // ensure that it is not displayed in a stale position.
+    onResize?: () => void;
+}
+
+/**
  * This component can be used to display generic HTML content in a contextual
  * menu.
  */
-
 @replaceableComponent("views.context_menus.GenericElementContextMenu")
-export default class GenericElementContextMenu extends React.Component {
-    static propTypes = {
-        element: PropTypes.element.isRequired,
-        // Function to be called when the parent window is resized
-        // This can be used to reposition or close the menu on resize and
-        // ensure that it is not displayed in a stale position.
-        onResize: PropTypes.func,
-    };
-
-    constructor(props) {
+export default class GenericElementContextMenu extends React.Component<IProps> {
+    constructor(props: IProps) {
         super(props);
-        this.resize = this.resize.bind(this);
     }
 
-    componentDidMount() {
-        this.resize = this.resize.bind(this);
+    public componentDidMount(): void {
         window.addEventListener("resize", this.resize);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         window.removeEventListener("resize", this.resize);
     }
 
-    resize() {
+    private resize = (): void => {
         if (this.props.onResize) {
             this.props.onResize();
         }
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         return <div>{ this.props.element }</div>;
     }
 }

src/components/views/context_menus/GenericTextContextMenu.tsx

@@ -15,16 +15,15 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.context_menus.GenericTextContextMenu")
-export default class GenericTextContextMenu extends React.Component {
-    static propTypes = {
-        message: PropTypes.string.isRequired,
-    };
+interface IProps {
+    message: string;
+}
 
-    render() {
+@replaceableComponent("views.context_menus.GenericTextContextMenu")
+export default class GenericTextContextMenu extends React.Component<IProps> {
+    public render(): JSX.Element {
         return <div>{ this.props.message }</div>;
     }
 }

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -168,7 +168,7 @@ const SpaceContextMenu = ({ space, onFinished, ...props }: IProps) => {
         defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
             action: Action.SetRightPanelPhase,
             phase: RightPanelPhases.SpaceMemberList,
-            refireParams: { space: space },
+            refireParams: { space },
         });
         onFinished();
     };

src/components/views/context_menus/StatusMessageContextMenu.tsx

@@ -14,53 +14,59 @@ 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, { ChangeEvent } from 'react';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { User } from "matrix-js-sdk/src/models/user";
+import Spinner from "../elements/Spinner";
+
+interface IProps {
+    // js-sdk User object. Not required because it might not exist.
+    user?: User;
+}
+
+interface IState {
+    message: string;
+    waiting: boolean;
+}
 
 @replaceableComponent("views.context_menus.StatusMessageContextMenu")
-export default class StatusMessageContextMenu extends React.Component {
-    static propTypes = {
-        // js-sdk User object. Not required because it might not exist.
-        user: PropTypes.object,
-    };
-
-    constructor(props) {
+export default class StatusMessageContextMenu extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
             message: this.comittedStatusMessage,
+            waiting: false,
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         const { user } = this.props;
         if (!user) {
             return;
         }
-        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+        user.on("User._unstable_statusMessage", this.onStatusMessageCommitted);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const { user } = this.props;
         if (!user) {
             return;
         }
         user.removeListener(
             "User._unstable_statusMessage",
-            this._onStatusMessageCommitted,
+            this.onStatusMessageCommitted,
         );
     }
 
-    get comittedStatusMessage() {
-        return this.props.user ? this.props.user._unstable_statusMessage : "";
+    get comittedStatusMessage(): string {
+        return this.props.user ? this.props.user.unstable_statusMessage : "";
     }
 
-    _onStatusMessageCommitted = () => {
+    private onStatusMessageCommitted = (): void => {
         // The `User` object has observed a status message change.
         this.setState({
             message: this.comittedStatusMessage,
@@ -68,14 +74,14 @@ export default class StatusMessageContextMenu extends React.Component {
         });
     };
 
-    _onClearClick = (e) => {
+    private onClearClick = (): void=> {
         MatrixClientPeg.get()._unstable_setStatusMessage("");
         this.setState({
             waiting: true,
         });
     };
 
-    _onSubmit = (e) => {
+    private onSubmit = (e: ButtonEvent): void => {
         e.preventDefault();
         MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
         this.setState({
@@ -83,27 +89,25 @@ export default class StatusMessageContextMenu extends React.Component {
         });
     };
 
-    _onStatusChange = (e) => {
+    private onStatusChange = (e: ChangeEvent): void => {
         // The input field's value was changed.
         this.setState({
-            message: e.target.value,
+            message: (e.target as HTMLInputElement).value,
         });
     };
 
-    render() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-
+    public render(): JSX.Element {
         let actionButton;
         if (this.comittedStatusMessage) {
             if (this.state.message === this.comittedStatusMessage) {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_clear"
-                    onClick={this._onClearClick}
+                    onClick={this.onClearClick}
                 >
                     <span>{ _t("Clear status") }</span>
                 </AccessibleButton>;
             } else {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
-                    onClick={this._onSubmit}
+                    onClick={this.onSubmit}
                 >
                     <span>{ _t("Update status") }</span>
                 </AccessibleButton>;
@@ -112,7 +116,7 @@ export default class StatusMessageContextMenu extends React.Component {
             actionButton = <AccessibleButton
                 className="mx_StatusMessageContextMenu_submit"
                 disabled={!this.state.message}
-                onClick={this._onSubmit}
+                onClick={this.onSubmit}
             >
                 <span>{ _t("Set status") }</span>
             </AccessibleButton>;
@@ -120,13 +124,13 @@ export default class StatusMessageContextMenu extends React.Component {
 
         let spinner = null;
         if (this.state.waiting) {
-            spinner = <Spinner w="24" h="24" />;
+            spinner = <Spinner w={24} h={24} />;
         }
 
         const form = <form
             className="mx_StatusMessageContextMenu_form"
             autoComplete="off"
-            onSubmit={this._onSubmit}
+            onSubmit={this.onSubmit}
         >
             <input
                 type="text"
@@ -134,9 +138,9 @@ export default class StatusMessageContextMenu extends React.Component {
                 key="message"
                 placeholder={_t("Set a new status...")}
                 autoFocus={true}
-                maxLength="60"
+                maxLength={60}
                 value={this.state.message}
-                onChange={this._onStatusChange}
+                onChange={this.onStatusChange}
             />
             <div className="mx_StatusMessageContextMenu_actionContainer">
                 { actionButton }

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -258,7 +258,6 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
             className="mx_textinput_icon mx_textinput_search"
             placeholder={filterPlaceholder}
             onSearch={setQuery}
-            autoComplete={true}
             autoFocus={true}
         />
         <AutoHideScrollbar className="mx_AddExistingToSpace_content">

src/components/views/dialogs/BaseDialog.tsx

@@ -18,15 +18,54 @@ limitations under the License.
 
 import React from 'react';
 import FocusLock from 'react-focus-lock';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Key } from '../../../Keyboard';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    // Whether the dialog should have a 'close' button that will
+    // cause the dialog to be cancelled. This should only be set
+    // to false if there is nothing the app can sensibly do if the
+    // dialog is cancelled, eg. "We can't restore your session and
+    // the app cannot work". Default: true.
+    hasCancel?: boolean;
+
+    // called when a key is pressed
+    onKeyDown?: (e: KeyboardEvent | React.KeyboardEvent) => void;
+
+    // CSS class to apply to dialog div
+    className?: string;
+
+    // if true, dialog container is 60% of the viewport width. Otherwise,
+    // the container will have no fixed size, allowing its contents to
+    // determine its size. Default: true.
+    fixedWidth?: boolean;
+
+    // Title for the dialog.
+    title?: JSX.Element | string;
+
+    // Path to an icon to put in the header
+    headerImage?: string;
+
+    // children should be the content of the dialog
+    children?: React.ReactNode;
+
+    // Id of content element
+    // If provided, this is used to add a aria-describedby attribute
+    contentId?: string;
+
+    // optional additional class for the title element (basically anything that can be passed to classnames)
+    titleClass?: string | string[];
+
+    headerButton?: JSX.Element;
+}
 
 /*
  * Basic container for modal dialogs.
@@ -35,54 +74,10 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * dialog on escape.
  */
 @replaceableComponent("views.dialogs.BaseDialog")
-export default class BaseDialog extends React.Component {
-    static propTypes = {
-        // onFinished callback to call when Escape is pressed
-        // Take a boolean which is true if the dialog was dismissed
-        // with a positive / confirm action or false if it was
-        // cancelled (BaseDialog itself only calls this with false).
-        onFinished: PropTypes.func.isRequired,
+export default class BaseDialog extends React.Component<IProps> {
+    private matrixClient: MatrixClient;
 
-        // Whether the dialog should have a 'close' button that will
-        // cause the dialog to be cancelled. This should only be set
-        // to false if there is nothing the app can sensibly do if the
-        // dialog is cancelled, eg. "We can't restore your session and
-        // the app cannot work". Default: true.
-        hasCancel: PropTypes.bool,
-
-        // called when a key is pressed
-        onKeyDown: PropTypes.func,
-
-        // CSS class to apply to dialog div
-        className: PropTypes.string,
-
-        // if true, dialog container is 60% of the viewport width. Otherwise,
-        // the container will have no fixed size, allowing its contents to
-        // determine its size. Default: true.
-        fixedWidth: PropTypes.bool,
-
-        // Title for the dialog.
-        title: PropTypes.node.isRequired,
-
-        // Path to an icon to put in the header
-        headerImage: PropTypes.string,
-
-        // children should be the content of the dialog
-        children: PropTypes.node,
-
-        // Id of content element
-        // If provided, this is used to add a aria-describedby attribute
-        contentId: PropTypes.string,
-
-        // optional additional class for the title element (basically anything that can be passed to classnames)
-        titleClass: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.object,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-    };
-
-    static defaultProps = {
+    public static defaultProps = {
         hasCancel: true,
         fixedWidth: true,
     };
@@ -90,10 +85,10 @@ export default class BaseDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._matrixClient = MatrixClientPeg.get();
+        this.matrixClient = MatrixClientPeg.get();
     }
 
-    _onKeyDown = (e) => {
+    private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => {
         if (this.props.onKeyDown) {
             this.props.onKeyDown(e);
         }
@@ -104,15 +99,15 @@ export default class BaseDialog extends React.Component {
         }
     };
 
-    _onCancelClick = (e) => {
+    private onCancelClick = (e: ButtonEvent): void => {
         this.props.onFinished(false);
     };
 
-    render() {
+    public render(): JSX.Element {
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = (
-                <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton" aria-label={_t("Close dialog")} />
+                <AccessibleButton onClick={this.onCancelClick} className="mx_Dialog_cancelButton" aria-label={_t("Close dialog")} />
             );
         }
 
@@ -122,11 +117,11 @@ export default class BaseDialog extends React.Component {
         }
 
         return (
-            <MatrixClientContext.Provider value={this._matrixClient}>
+            <MatrixClientContext.Provider value={this.matrixClient}>
                 <FocusLock
                     returnFocus={true}
                     lockProps={{
-                        onKeyDown: this._onKeyDown,
+                        onKeyDown: this.onKeyDown,
                         role: "dialog",
                         ["aria-labelledby"]: "mx_BaseDialog_title",
                         // This should point to a node describing the dialog.

src/components/views/dialogs/BugReportDialog.tsx

@@ -215,7 +215,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                             {
                                 a: (sub) => <a
                                     target="_blank"
-                                    href="https://github.com/vector-im/element-web/issues/new"
+                                    href="https://github.com/vector-im/element-web/issues/new/choose"
                                 >
                                     { sub }
                                 </a>,

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -39,11 +39,13 @@ interface IProps {
     defaultPublic?: boolean;
     defaultName?: string;
     parentSpace?: Room;
+    defaultEncrypted?: boolean;
     onFinished(proceed: boolean, opts?: IOpts): void;
 }
 
 interface IState {
     joinRule: JoinRule;
+    isPublic: boolean;
     isEncrypted: boolean;
     name: string;
     topic: string;
@@ -74,8 +76,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
 
         const config = SdkConfig.get();
         this.state = {
+            isPublic: this.props.defaultPublic || false,
+            isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(),
             joinRule,
-            isEncrypted: privateShouldBeEncrypted(),
             name: this.props.defaultName || "",
             topic: "",
             alias: "",

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -125,14 +125,14 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
         setBusy(true);
 
         // require & validate the space name field
-        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+        if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
             setBusy(false);
             spaceNameField.current.focus();
             spaceNameField.current.validate({ allowEmpty: false, focused: true });
             return;
         }
         // validate the space name alias field but do not require it
-        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+        if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) {
             setBusy(false);
             spaceAliasField.current.focus();
             spaceAliasField.current.validate({ allowEmpty: true, focused: true });

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -64,14 +64,14 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
 
         setBusy(true);
         // require & validate the space name field
-        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+        if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
             spaceNameField.current.focus();
             spaceNameField.current.validate({ allowEmpty: false, focused: true });
             setBusy(false);
             return;
         }
         // validate the space name alias field but do not require it
-        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+        if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) {
             spaceAliasField.current.focus();
             spaceAliasField.current.validate({ allowEmpty: true, focused: true });
             setBusy(false);
@@ -79,7 +79,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
         }
 
         try {
-            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace });
+            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace, joinRule });
 
             onFinished(true);
         } catch (e) {

src/components/views/dialogs/CryptoStoreTooNewDialog.tsx

@@ -23,10 +23,9 @@ import Modal from '../../../Modal';
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import QuestionDialog from "./QuestionDialog";
+import { IDialogProps } from "./IDialogProps";
 
-interface IProps {
-    onFinished: (success: boolean) => void;
-}
+interface IProps extends IDialogProps {}
 
 const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
     const brand = SdkConfig.get().brand;

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -44,6 +44,8 @@ import { SettingLevel } from '../../../settings/SettingLevel';
 import BaseDialog from "./BaseDialog";
 import TruncatedList from "../elements/TruncatedList";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 interface IGenericEditorProps {
     onBack: () => void;
 }
@@ -984,7 +986,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
             const parsedExplicit = JSON.parse(this.state.explicitValues);
             const parsedExplicitRoom = JSON.parse(this.state.explicitRoomValues);
             for (const level of Object.keys(parsedExplicit)) {
-                console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
+                logger.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
                 try {
                     const val = parsedExplicit[level];
                     await SettingsStore.setValue(settingId, null, level as SettingLevel, val);
@@ -994,7 +996,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
             }
             const roomId = this.props.room.roomId;
             for (const level of Object.keys(parsedExplicit)) {
-                console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
+                logger.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
                 try {
                     const val = parsedExplicitRoom[level];
                     await SettingsStore.setValue(settingId, roomId, level as SettingLevel, val);

src/components/views/dialogs/FeedbackDialog.tsx

@@ -19,30 +19,33 @@ import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import AccessibleButton from "../elements/AccessibleButton";
-import CountlyAnalytics from "../../../CountlyAnalytics";
+import CountlyAnalytics, { Rating } from "../../../CountlyAnalytics";
 import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
 import BugReportDialog from "./BugReportDialog";
 import InfoDialog from "./InfoDialog";
 import StyledRadioGroup from "../elements/StyledRadioGroup";
+import { IDialogProps } from "./IDialogProps";
 
 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 newIssueUrl = "https://github.com/vector-im/element-web/issues/new/choose";
 
-export default (props) => {
-    const [rating, setRating] = useState("");
-    const [comment, setComment] = useState("");
+interface IProps extends IDialogProps {}
 
-    const onDebugLogsLinkClick = () => {
+const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
+    const [rating, setRating] = useState<Rating>();
+    const [comment, setComment] = useState<string>("");
+
+    const onDebugLogsLinkClick = (): void => {
         props.onFinished();
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
     const hasFeedback = CountlyAnalytics.instance.canEnable();
-    const onFinished = (sendFeedback) => {
+    const onFinished = (sendFeedback: boolean): void => {
         if (hasFeedback && sendFeedback) {
-            CountlyAnalytics.instance.reportFeedback(parseInt(rating, 10), comment);
+            CountlyAnalytics.instance.reportFeedback(rating, comment);
             Modal.createTrackedDialog('Feedback sent', '', InfoDialog, {
                 title: _t('Feedback sent'),
                 description: _t('Thank you!'),
@@ -65,8 +68,8 @@ export default (props) => {
 
                 <StyledRadioGroup
                     name="feedbackRating"
-                    value={rating}
-                    onChange={setRating}
+                    value={String(rating)}
+                    onChange={(r) => setRating(parseInt(r, 10) as Rating)}
                     definitions={[
                         { value: "1", label: "😠" },
                         { value: "2", label: "😞" },
@@ -138,7 +141,9 @@ export default (props) => {
             { countlyFeedbackSection }
         </React.Fragment>}
         button={hasFeedback ? _t("Send feedback") : _t("Go back")}
-        buttonDisabled={hasFeedback && rating === ""}
+        buttonDisabled={hasFeedback && !rating}
         onFinished={onFinished}
     />);
 };
+
+export default FeedbackDialog;

src/components/views/dialogs/ForwardDialog.tsx

@@ -243,7 +243,6 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                 className="mx_textinput_icon mx_textinput_search"
                 placeholder={_t("Search for rooms or people")}
                 onSearch={setQuery}
-                autoComplete={true}
                 autoFocus={true}
             />
             <AutoHideScrollbar className="mx_ForwardList_content">

src/components/views/dialogs/IncomingSasDialog.tsx

@@ -15,12 +15,22 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import VerificationComplete from "../verification/VerificationComplete";
+import VerificationCancelled from "../verification/VerificationCancelled";
+import BaseAvatar from "../avatars/BaseAvatar";
+import Spinner from "../elements/Spinner";
+import VerificationShowSas from "../verification/VerificationShowSas";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { IDialogProps } from "./IDialogProps";
+import { IGeneratedSas, ISasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
+import { VerificationBase } from "matrix-js-sdk/src/crypto/verification/Base";
+
+import { logger } from "matrix-js-sdk/src/logger";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -28,41 +38,56 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
 const PHASE_VERIFIED = 3;
 const PHASE_CANCELLED = 4;
 
-@replaceableComponent("views.dialogs.IncomingSasDialog")
-export default class IncomingSasDialog extends React.Component {
-    static propTypes = {
-        verifier: PropTypes.object.isRequired,
-    };
+interface IProps extends IDialogProps {
+    verifier: VerificationBase; // TODO types
+}
 
-    constructor(props) {
+interface IState {
+    phase: number;
+    sasVerified: boolean;
+    opponentProfile: {
+        // eslint-disable-next-line camelcase
+        avatar_url?: string;
+        displayname?: string;
+    };
+    opponentProfileError: Error;
+    sas: IGeneratedSas;
+}
+
+@replaceableComponent("views.dialogs.IncomingSasDialog")
+export default class IncomingSasDialog extends React.Component<IProps, IState> {
+    private showSasEvent: ISasEvent;
+
+    constructor(props: IProps) {
         super(props);
 
         let phase = PHASE_START;
-        if (this.props.verifier.cancelled) {
-            console.log("Verifier was cancelled in the background.");
+        if (this.props.verifier.hasBeenCancelled) {
+            logger.log("Verifier was cancelled in the background.");
             phase = PHASE_CANCELLED;
         }
 
-        this._showSasEvent = null;
+        this.showSasEvent = null;
         this.state = {
             phase: phase,
             sasVerified: false,
             opponentProfile: null,
             opponentProfileError: null,
+            sas: null,
         };
-        this.props.verifier.on('show_sas', this._onVerifierShowSas);
-        this.props.verifier.on('cancel', this._onVerifierCancel);
-        this._fetchOpponentProfile();
+        this.props.verifier.on('show_sas', this.onVerifierShowSas);
+        this.props.verifier.on('cancel', this.onVerifierCancel);
+        this.fetchOpponentProfile();
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
-            this.props.verifier.cancel('User cancel');
+            this.props.verifier.cancel(new Error('User cancel'));
         }
-        this.props.verifier.removeListener('show_sas', this._onVerifierShowSas);
+        this.props.verifier.removeListener('show_sas', this.onVerifierShowSas);
     }
 
-    async _fetchOpponentProfile() {
+    private async fetchOpponentProfile(): Promise<void> {
         try {
             const prof = await MatrixClientPeg.get().getProfileInfo(
                 this.props.verifier.userId,
@@ -77,53 +102,49 @@ export default class IncomingSasDialog extends React.Component {
         }
     }
 
-    _onFinished = () => {
+    private onFinished = (): void => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
-    }
+    };
 
-    _onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
-    }
+    };
 
-    _onContinueClick = () => {
+    private onContinueClick = (): void => {
         this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM });
         this.props.verifier.verify().then(() => {
             this.setState({ phase: PHASE_VERIFIED });
         }).catch((e) => {
-            console.log("Verification failed", e);
+            logger.log("Verification failed", e);
         });
-    }
+    };
 
-    _onVerifierShowSas = (e) => {
-        this._showSasEvent = e;
+    private onVerifierShowSas = (e: ISasEvent): void => {
+        this.showSasEvent = e;
         this.setState({
             phase: PHASE_SHOW_SAS,
             sas: e.sas,
         });
-    }
+    };
 
-    _onVerifierCancel = (e) => {
+    private onVerifierCancel = (): void => {
         this.setState({
             phase: PHASE_CANCELLED,
         });
-    }
+    };
 
-    _onSasMatchesClick = () => {
-        this._showSasEvent.confirm();
+    private onSasMatchesClick = (): void => {
+        this.showSasEvent.confirm();
         this.setState({
             phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
         });
-    }
+    };
 
-    _onVerifiedDoneClick = () => {
+    private onVerifiedDoneClick = (): void => {
         this.props.onFinished(true);
-    }
-
-    _renderPhaseStart() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+    };
 
+    private renderPhaseStart(): JSX.Element {
         const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId();
 
         let profile;
@@ -190,27 +211,24 @@ export default class IncomingSasDialog extends React.Component {
                 <DialogButtons
                     primaryButton={_t('Continue')}
                     hasCancel={true}
-                    onPrimaryButtonClick={this._onContinueClick}
-                    onCancel={this._onCancelClick}
+                    onPrimaryButtonClick={this.onContinueClick}
+                    onCancel={this.onCancelClick}
                 />
             </div>
         );
     }
 
-    _renderPhaseShowSas() {
-        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+    private renderPhaseShowSas(): JSX.Element {
         return <VerificationShowSas
-            sas={this._showSasEvent.sas}
-            onCancel={this._onCancelClick}
-            onDone={this._onSasMatchesClick}
+            sas={this.showSasEvent.sas}
+            onCancel={this.onCancelClick}
+            onDone={this.onSasMatchesClick}
             isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
             inDialog={true}
         />;
     }
 
-    _renderPhaseWaitForPartnerToConfirm() {
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-
+    private renderPhaseWaitForPartnerToConfirm(): JSX.Element {
         return (
             <div>
                 <Spinner />
@@ -219,41 +237,38 @@ export default class IncomingSasDialog extends React.Component {
         );
     }
 
-    _renderPhaseVerified() {
-        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
-        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
+    private renderPhaseVerified(): JSX.Element {
+        return <VerificationComplete onDone={this.onVerifiedDoneClick} />;
     }
 
-    _renderPhaseCancelled() {
-        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
-        return <VerificationCancelled onDone={this._onCancelClick} />;
+    private renderPhaseCancelled(): JSX.Element {
+        return <VerificationCancelled onDone={this.onCancelClick} />;
     }
 
-    render() {
+    public render(): JSX.Element {
         let body;
         switch (this.state.phase) {
             case PHASE_START:
-                body = this._renderPhaseStart();
+                body = this.renderPhaseStart();
                 break;
             case PHASE_SHOW_SAS:
-                body = this._renderPhaseShowSas();
+                body = this.renderPhaseShowSas();
                 break;
             case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
-                body = this._renderPhaseWaitForPartnerToConfirm();
+                body = this.renderPhaseWaitForPartnerToConfirm();
                 break;
             case PHASE_VERIFIED:
-                body = this._renderPhaseVerified();
+                body = this.renderPhaseVerified();
                 break;
             case PHASE_CANCELLED:
-                body = this._renderPhaseCancelled();
+                body = this.renderPhaseCancelled();
                 break;
         }
 
-        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
         return (
             <BaseDialog
                 title={_t("Incoming Verification Request")}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
                 fixedWidth={false}
             >
                 { body }

src/components/views/dialogs/IntegrationsDisabledDialog.tsx

@@ -15,32 +15,28 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from "../../../languageHandler";
-import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from "../../../dispatcher/actions";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {}
 
 @replaceableComponent("views.dialogs.IntegrationsDisabledDialog")
-export default class IntegrationsDisabledDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onAcknowledgeClick = () => {
+export default class IntegrationsDisabledDialog extends React.Component<IProps> {
+    private onAcknowledgeClick = (): void => {
         this.props.onFinished();
     };
 
-    _onOpenSettingsClick = () => {
+    private onOpenSettingsClick = (): void => {
         this.props.onFinished();
         dis.fire(Action.ViewUserSettings);
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className='mx_IntegrationsDisabledDialog'
@@ -53,9 +49,9 @@ export default class IntegrationsDisabledDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Settings")}
-                    onPrimaryButtonClick={this._onOpenSettingsClick}
+                    onPrimaryButtonClick={this.onOpenSettingsClick}
                     cancelButton={_t("OK")}
-                    onCancel={this._onAcknowledgeClick}
+                    onCancel={this.onAcknowledgeClick}
                 />
             </BaseDialog>
         );

src/components/views/dialogs/IntegrationsImpossibleDialog.tsx

@@ -15,23 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {}
 
 @replaceableComponent("views.dialogs.IntegrationsImpossibleDialog")
-export default class IntegrationsImpossibleDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onAcknowledgeClick = () => {
+export default class IntegrationsImpossibleDialog extends React.Component<IProps> {
+    private onAcknowledgeClick = (): void => {
         this.props.onFinished();
     };
 
-    render() {
+    public render(): JSX.Element {
         const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -54,7 +52,7 @@ export default class IntegrationsImpossibleDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("OK")}
-                    onPrimaryButtonClick={this._onAcknowledgeClick}
+                    onPrimaryButtonClick={this.onAcknowledgeClick}
                     hasCancel={false}
                 />
             </BaseDialog>

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -17,69 +17,88 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
-import { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import InteractiveAuth, { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import BaseDialog from "./BaseDialog";
+import { IAuthData } from "matrix-js-sdk/src/interactive-auth";
+import { IDialogProps } from "./IDialogProps";
+
+interface IDialogAesthetics {
+    [x: string]: {
+        [x: number]: {
+            title: string;
+            body: string;
+            continueText: string;
+            continueKind: string;
+        };
+    };
+}
+
+interface IProps extends IDialogProps {
+    // matrix client to use for UI auth requests
+    matrixClient: MatrixClient;
+
+    // response from initial request. If not supplied, will do a request on
+    // mount.
+    authData?: IAuthData;
+
+    // callback
+    makeRequest: (auth: IAuthData) => Promise<IAuthData>;
+
+    // Optional title and body to show when not showing a particular stage
+    title?: string;
+    body?: string;
+
+    // Optional title and body pairs for particular stages and phases within
+    // those stages. Object structure/example is:
+    // {
+    //     "org.example.stage_type": {
+    //         1: {
+    //             "body": "This is a body for phase 1" of org.example.stage_type,
+    //             "title": "Title for phase 1 of org.example.stage_type"
+    //         },
+    //         2: {
+    //             "body": "This is a body for phase 2 of org.example.stage_type",
+    //             "title": "Title for phase 2 of org.example.stage_type"
+    //             "continueText": "Confirm identity with Example Auth",
+    //             "continueKind": "danger"
+    //         }
+    //     }
+    // }
+    //
+    // Default is defined in _getDefaultDialogAesthetics()
+    aestheticsForStagePhases?: IDialogAesthetics;
+}
+
+interface IState {
+    authError: Error;
+
+    // See _onUpdateStagePhase()
+    uiaStage: number | string;
+    uiaStagePhase: number | string;
+}
 
 @replaceableComponent("views.dialogs.InteractiveAuthDialog")
-export default class InteractiveAuthDialog extends React.Component {
-    static propTypes = {
-        // matrix client to use for UI auth requests
-        matrixClient: PropTypes.object.isRequired,
+export default class InteractiveAuthDialog extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
-        // response from initial request. If not supplied, will do a request on
-        // mount.
-        authData: PropTypes.shape({
-            flows: PropTypes.array,
-            params: PropTypes.object,
-            session: PropTypes.string,
-        }),
+        this.state = {
+            authError: null,
 
-        // callback
-        makeRequest: PropTypes.func.isRequired,
+            // See _onUpdateStagePhase()
+            uiaStage: null,
+            uiaStagePhase: null,
+        };
+    }
 
-        onFinished: PropTypes.func.isRequired,
-
-        // Optional title and body to show when not showing a particular stage
-        title: PropTypes.string,
-        body: PropTypes.string,
-
-        // Optional title and body pairs for particular stages and phases within
-        // those stages. Object structure/example is:
-        // {
-        //     "org.example.stage_type": {
-        //         1: {
-        //             "body": "This is a body for phase 1" of org.example.stage_type,
-        //             "title": "Title for phase 1 of org.example.stage_type"
-        //         },
-        //         2: {
-        //             "body": "This is a body for phase 2 of org.example.stage_type",
-        //             "title": "Title for phase 2 of org.example.stage_type"
-        //             "continueText": "Confirm identity with Example Auth",
-        //             "continueKind": "danger"
-        //         }
-        //     }
-        // }
-        //
-        // Default is defined in _getDefaultDialogAesthetics()
-        aestheticsForStagePhases: PropTypes.object,
-    };
-
-    state = {
-        authError: null,
-
-        // See _onUpdateStagePhase()
-        uiaStage: null,
-        uiaStagePhase: null,
-    };
-
-    _getDefaultDialogAesthetics() {
+    private getDefaultDialogAesthetics(): IDialogAesthetics {
         const ssoAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 title: _t("Use Single Sign On to continue"),
@@ -101,7 +120,7 @@ export default class InteractiveAuthDialog extends React.Component {
         };
     }
 
-    _onAuthFinished = (success, result) => {
+    private onAuthFinished = (success: boolean, result: Error): void => {
         if (success) {
             this.props.onFinished(true, result);
         } else {
@@ -115,19 +134,16 @@ export default class InteractiveAuthDialog extends React.Component {
         }
     };
 
-    _onUpdateStagePhase = (newStage, newPhase) => {
+    private onUpdateStagePhase = (newStage: string | number, newPhase: string | number): void => {
         // We copy the stage and stage phase params into state for title selection in render()
         this.setState({ uiaStage: newStage, uiaStagePhase: newPhase });
     };
 
-    _onDismissClick = () => {
+    private onDismissClick = (): void => {
         this.props.onFinished(false);
     };
 
-    render() {
-        const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
+    public render(): JSX.Element {
         // Let's pick a title, body, and other params text that we'll show to the user. The order
         // is most specific first, so stagePhase > our props > defaults.
 
@@ -135,7 +151,7 @@ export default class InteractiveAuthDialog extends React.Component {
         let body = this.state.authError ? null : this.props.body;
         let continueText = null;
         let continueKind = null;
-        const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics();
+        const dialogAesthetics = this.props.aestheticsForStagePhases || this.getDefaultDialogAesthetics();
         if (!this.state.authError && dialogAesthetics) {
             if (dialogAesthetics[this.state.uiaStage]) {
                 const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
@@ -152,9 +168,9 @@ export default class InteractiveAuthDialog extends React.Component {
                 <div id='mx_Dialog_content'>
                     <div role="alert">{ this.state.authError.message || this.state.authError.toString() }</div>
                     <br />
-                    <AccessibleButton onClick={this._onDismissClick}
+                    <AccessibleButton onClick={this.onDismissClick}
                         className="mx_GeneralButton"
-                        autoFocus="true"
+                        autoFocus={true}
                     >
                         { _t("Dismiss") }
                     </AccessibleButton>
@@ -165,12 +181,11 @@ export default class InteractiveAuthDialog extends React.Component {
                 <div id='mx_Dialog_content'>
                     { body }
                     <InteractiveAuth
-                        ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
-                        onAuthFinished={this._onAuthFinished}
-                        onStagePhaseChange={this._onUpdateStagePhase}
+                        onAuthFinished={this.onAuthFinished}
+                        onStagePhaseChange={this.onUpdateStagePhase}
                         continueText={continueText}
                         continueKind={continueKind}
                     />

src/components/views/dialogs/InviteDialog.tsx

@@ -73,6 +73,8 @@ import BaseDialog from "./BaseDialog";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
 import SpaceStore from "../../../stores/SpaceStore";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
@@ -775,7 +777,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             invitedUsers.push(addr);
                         }
                     }
-                    console.log("Sharing history with", invitedUsers);
+                    logger.log("Sharing history with", invitedUsers);
                     cli.sendSharedHistoryKeys(
                         this.props.roomId, invitedUsers,
                     );

src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx

@@ -15,20 +15,29 @@ limitations under the License.
 */
 
 import React, { useState, useCallback, useRef } from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import Spinner from "../elements/Spinner";
+import { IDialogProps } from "./IDialogProps";
 
-export default function KeySignatureUploadFailedDialog({
+interface IProps extends IDialogProps {
+    failures: Record<string, Record<string, {
+        errcode: string;
+        error: string;
+    }>>;
+    source: string;
+    continuation: () => void;
+}
+
+const KeySignatureUploadFailedDialog: React.FC<IProps> = ({
     failures,
     source,
     continuation,
     onFinished,
-}) {
+}) => {
     const RETRIES = 2;
-    const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
-    const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-    const Spinner = sdk.getComponent('elements.Spinner');
     const [retry, setRetry] = useState(RETRIES);
     const [cancelled, setCancelled] = useState(false);
     const [retrying, setRetrying] = useState(false);
@@ -107,4 +116,6 @@ export default function KeySignatureUploadFailedDialog({
             { body }
         </BaseDialog>
     );
-}
+};
+
+export default KeySignatureUploadFailedDialog;

src/components/views/dialogs/LazyLoadingDisabledDialog.tsx

@@ -19,8 +19,13 @@ import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import { IDialogProps } from "./IDialogProps";
 
-export default (props) => {
+interface IProps extends IDialogProps {
+    host: string;
+}
+
+const LazyLoadingDisabledDialog: React.FC<IProps> = (props) => {
     const brand = SdkConfig.get().brand;
     const description1 = _t(
         "You've previously used %(brand)s on %(host)s with lazy loading of members enabled. " +
@@ -49,3 +54,5 @@ export default (props) => {
         onFinished={props.onFinished}
     />);
 };
+
+export default LazyLoadingDisabledDialog;

src/components/views/dialogs/LazyLoadingResyncDialog.tsx

@@ -19,8 +19,11 @@ import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import { IDialogProps } from "./IDialogProps";
 
-export default (props) => {
+interface IProps extends IDialogProps {}
+
+const LazyLoadingResyncDialog: React.FC<IProps> = (props) => {
     const brand = SdkConfig.get().brand;
     const description =
         _t(
@@ -38,3 +41,5 @@ export default (props) => {
         onFinished={props.onFinished}
     />);
 };
+
+export default LazyLoadingResyncDialog;

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -57,7 +57,6 @@ const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
             className="mx_textinput_icon mx_textinput_search"
             placeholder={filterPlaceholder}
             onSearch={setQuery}
-            autoComplete={true}
             autoFocus={true}
         />
         <AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
@@ -80,7 +79,7 @@ const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
 
 const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave }) => {
     const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
-    const [state, setState] = useState<string>(RoomsToLeave.All);
+    const [state, setState] = useState<string>(RoomsToLeave.None);
 
     useEffect(() => {
         if (state === RoomsToLeave.All) {
@@ -97,14 +96,14 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
             onChange={setState}
             definitions={[
                 {
-                    value: RoomsToLeave.All,
-                    label: _t("Leave all rooms and spaces"),
-                }, {
                     value: RoomsToLeave.None,
-                    label: _t("Don't leave any"),
+                    label: _t("Don't leave any rooms"),
+                }, {
+                    value: RoomsToLeave.All,
+                    label: _t("Leave all rooms"),
                 }, {
                     value: RoomsToLeave.Specific,
-                    label: _t("Leave specific rooms and spaces"),
+                    label: _t("Leave some rooms"),
                 },
             ]}
         />
@@ -167,11 +166,13 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
     >
         <div className="mx_Dialog_content" id="mx_LeaveSpaceDialog">
             <p>
-                { _t("Are you sure you want to leave <spaceName/>?", {}, {
+                { _t("You are about to leave <spaceName/>.", {}, {
                     spaceName: () => <b>{ space.name }</b>,
                 }) }
                 &nbsp;
                 { rejoinWarning }
+                { rejoinWarning && (<>&nbsp;</>) }
+                { spaceChildren.length > 0 && _t("Would you like to leave the rooms in this space?") }
             </p>
 
             { spaceChildren.length > 0 && <LeaveRoomsPicker

src/components/views/dialogs/LogoutDialog.tsx

@@ -25,6 +25,8 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 interface IProps {
     onFinished: (success: boolean) => void;
 }
@@ -68,7 +70,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
                 backupInfo,
             });
         } catch (e) {
-            console.log("Unable to fetch key backup status", e);
+            logger.log("Unable to fetch key backup status", e);
             this.setState({
                 loading: false,
                 error: e,

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -126,7 +126,6 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                 className="mx_textinput_icon mx_textinput_search"
                 placeholder={_t("Search spaces")}
                 onSearch={setQuery}
-                autoComplete={true}
                 autoFocus={true}
             />
             <AutoHideScrollbar className="mx_ManageRestrictedJoinRuleDialog_content">

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -19,37 +19,31 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import QuestionDialog from "./QuestionDialog";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    userId: string;
+    device: DeviceInfo;
+}
 
 @replaceableComponent("views.dialogs.ManualDeviceKeyVerificationDialog")
-export default class ManualDeviceKeyVerificationDialog extends React.Component {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onCancelClick = () => {
-        this.props.onFinished(false);
-    }
-
-    _onLegacyFinished = (confirm) => {
+export default class ManualDeviceKeyVerificationDialog extends React.Component<IProps> {
+    private onLegacyFinished = (confirm: boolean): void => {
         if (confirm) {
             MatrixClientPeg.get().setDeviceVerified(
                 this.props.userId, this.props.device.deviceId, true,
             );
         }
         this.props.onFinished(confirm);
-    }
-
-    render() {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    };
 
+    public render(): JSX.Element {
         let text;
         if (MatrixClientPeg.get().getUserId() === this.props.userId) {
             text = _t("Confirm by comparing the following with the User Settings in your other session:");
@@ -81,7 +75,7 @@ export default class ManualDeviceKeyVerificationDialog extends React.Component {
                 title={_t("Verify session")}
                 description={body}
                 button={_t("Verify session")}
-                onFinished={this._onLegacyFinished}
+                onFinished={this.onLegacyFinished}
             />
         );
     }

src/components/views/dialogs/MessageEditHistoryDialog.tsx

@@ -15,21 +15,39 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
-import * as sdk from "../../../index";
 import { wantsDateSeparator } from '../../../DateUtils';
 import SettingsStore from '../../../settings/SettingsStore';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import BaseDialog from "./BaseDialog";
+import ScrollPanel from "../../structures/ScrollPanel";
+import Spinner from "../elements/Spinner";
+import EditHistoryMessage from "../messages/EditHistoryMessage";
+import DateSeparator from "../messages/DateSeparator";
+import { IDialogProps } from "./IDialogProps";
+import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { defer } from "matrix-js-sdk/src/utils";
+
+interface IProps extends IDialogProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    originalEvent: MatrixEvent;
+    error: {
+        errcode: string;
+    };
+    events: MatrixEvent[];
+    nextBatch: string;
+    isLoading: boolean;
+    isTwelveHour: boolean;
+}
 
 @replaceableComponent("views.dialogs.MessageEditHistoryDialog")
-export default class MessageEditHistoryDialog extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-    };
-
-    constructor(props) {
+export default class MessageEditHistoryDialog extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             originalEvent: null,
@@ -41,7 +59,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         };
     }
 
-    loadMoreEdits = async (backwards) => {
+    private loadMoreEdits = async (backwards?: boolean): Promise<boolean> => {
         if (backwards || (!this.state.nextBatch && !this.state.isLoading)) {
             // bail out on backwards as we only paginate in one direction
             return false;
@@ -50,13 +68,13 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         const roomId = this.props.mxEvent.getRoomId();
         const eventId = this.props.mxEvent.getId();
         const client = MatrixClientPeg.get();
+
+        const { resolve, reject, promise } = defer<boolean>();
         let result;
-        let resolve;
-        let reject;
-        const promise = new Promise((_resolve, _reject) => {resolve = _resolve; reject = _reject;});
+
         try {
             result = await client.relations(
-                roomId, eventId, "m.replace", "m.room.message", opts);
+                roomId, eventId, RelationType.Replace, EventType.RoomMessage, opts);
         } catch (error) {
             // log if the server returned an error
             if (error.errcode) {
@@ -67,7 +85,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         }
 
         const newEvents = result.events;
-        this._locallyRedactEventsIfNeeded(newEvents);
+        this.locallyRedactEventsIfNeeded(newEvents);
         this.setState({
             originalEvent: this.state.originalEvent || result.originalEvent,
             events: this.state.events.concat(newEvents),
@@ -78,9 +96,9 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             resolve(hasMoreResults);
         });
         return promise;
-    }
+    };
 
-    _locallyRedactEventsIfNeeded(newEvents) {
+    private locallyRedactEventsIfNeeded(newEvents: MatrixEvent[]): void {
         const roomId = this.props.mxEvent.getRoomId();
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
@@ -95,13 +113,11 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         }
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         this.loadMoreEdits();
     }
 
-    _renderEdits() {
-        const EditHistoryMessage = sdk.getComponent('messages.EditHistoryMessage');
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+    private renderEdits(): JSX.Element[] {
         const nodes = [];
         let lastEvent;
         let allEvents = this.state.events;
@@ -128,7 +144,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         return nodes;
     }
 
-    render() {
+    public render(): JSX.Element {
         let content;
         if (this.state.error) {
             const { error } = this.state;
@@ -149,20 +165,17 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
                 </p>);
             }
         } else if (this.state.isLoading) {
-            const Spinner = sdk.getComponent("elements.Spinner");
             content = <Spinner />;
         } else {
-            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
             content = (<ScrollPanel
                 className="mx_MessageEditHistoryDialog_scrollPanel"
                 onFillRequest={this.loadMoreEdits}
                 stickyBottom={false}
                 startAtBottom={false}
             >
-                <ul className="mx_MessageEditHistoryDialog_edits">{ this._renderEdits() }</ul>
+                <ul className="mx_MessageEditHistoryDialog_edits">{ this.renderEdits() }</ul>
             </ScrollPanel>);
         }
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog
                 className='mx_MessageEditHistoryDialog'

src/components/views/dialogs/QuestionDialog.tsx

@@ -16,29 +16,30 @@ 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';
+import { IDialogProps } from "./IDialogProps";
 
-export default class QuestionDialog extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-        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,
-    };
+interface IProps extends IDialogProps {
+    title?: string;
+    description?: React.ReactNode;
+    extraButtons?: React.ReactNode;
+    button?: string;
+    buttonDisabled?: boolean;
+    danger?: boolean;
+    focus?: boolean;
+    headerImage?: string;
+    quitOnly?: boolean; // quitOnly doesn't show the cancel button just the quit [x].
+    fixedWidth?: boolean;
+    className?: string;
+    hasCancelButton?: boolean;
+    cancelButton?: React.ReactNode;
+}
 
-    static defaultProps = {
+export default class QuestionDialog extends React.Component<IProps> {
+    public static defaultProps: Partial<IProps> = {
         title: "",
         description: "",
         extraButtons: null,
@@ -48,17 +49,19 @@ export default class QuestionDialog extends React.Component {
         quitOnly: false,
     };
 
-    onOk = () => {
+    private onOk = (): void => {
         this.props.onFinished(true);
     };
 
-    onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    render() {
+    public render(): JSX.Element {
+        // Converting these to imports breaks wrench tests
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
         let primaryButtonClass = "";
         if (this.props.danger) {
             primaryButtonClass = "danger";

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -79,7 +79,10 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
             ROOM_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_RoomSettingsDialog_securityIcon",
-            <SecurityRoomSettingsTab roomId={this.props.roomId} />,
+            <SecurityRoomSettingsTab
+                roomId={this.props.roomId}
+                closeSettingsFn={() => this.props.onFinished(true)}
+            />,
         ));
         tabs.push(new Tab(
             ROOM_ROLES_TAB,

src/components/views/dialogs/SessionRestoreErrorDialog.tsx

@@ -17,27 +17,27 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import QuestionDialog from "./QuestionDialog";
+import BugReportDialog from "./BugReportDialog";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    error: string;
+}
 
 @replaceableComponent("views.dialogs.SessionRestoreErrorDialog")
-export default class SessionRestoreErrorDialog extends React.Component {
-    static propTypes = {
-        error: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _sendBugReport = () => {
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+export default class SessionRestoreErrorDialog extends React.Component<IProps> {
+    private sendBugReport = (): void => {
         Modal.createTrackedDialog('Session Restore Error', 'Send Bug Report Dialog', BugReportDialog, {});
     };
 
-    _onClearStorageClick = () => {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    private onClearStorageClick = (): void => {
         Modal.createTrackedDialog('Session Restore Confirm Logout', '', QuestionDialog, {
             title: _t("Sign out"),
             description:
@@ -48,19 +48,17 @@ export default class SessionRestoreErrorDialog extends React.Component {
         });
     };
 
-    _onRefreshClick = () => {
+    private onRefreshClick = (): void => {
         // Is this likely to help? Probably not, but giving only one button
         // that clears your storage seems awful.
-        window.location.reload(true);
+        window.location.reload();
     };
 
-    render() {
+    public render(): JSX.Element {
         const brand = SdkConfig.get().brand;
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         const clearStorageButton = (
-            <button onClick={this._onClearStorageClick} className="danger">
+            <button onClick={this.onClearStorageClick} className="danger">
                 { _t("Clear Storage and Sign Out") }
             </button>
         );
@@ -68,7 +66,7 @@ export default class SessionRestoreErrorDialog extends React.Component {
         let dialogButtons;
         if (SdkConfig.get().bug_report_endpoint_url) {
             dialogButtons = <DialogButtons primaryButton={_t("Send Logs")}
-                onPrimaryButtonClick={this._sendBugReport}
+                onPrimaryButtonClick={this.sendBugReport}
                 focus={true}
                 hasCancel={false}
             >
@@ -76,7 +74,7 @@ export default class SessionRestoreErrorDialog extends React.Component {
             </DialogButtons>;
         } else {
             dialogButtons = <DialogButtons primaryButton={_t("Refresh")}
-                onPrimaryButtonClick={this._onRefreshClick}
+                onPrimaryButtonClick={this.onRefreshClick}
                 focus={true}
                 hasCancel={false}
             >

src/components/views/dialogs/SetEmailDialog.tsx

@@ -16,13 +16,26 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from "../elements/Spinner";
+import ErrorDialog from "./ErrorDialog";
+import QuestionDialog from "./QuestionDialog";
+import BaseDialog from "./BaseDialog";
+import EditableText from "../elements/EditableText";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    title: string;
+}
+
+interface IState {
+    emailAddress: string;
+    emailBusy: boolean;
+}
 
 /*
  * Prompt the user to set an email address.
@@ -30,26 +43,25 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * On success, `onFinished(true)` is called.
  */
 @replaceableComponent("views.dialogs.SetEmailDialog")
-export default class SetEmailDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class SetEmailDialog extends React.Component<IProps, IState> {
+    private addThreepid: AddThreepid;
 
-    state = {
-        emailAddress: '',
-        emailBusy: false,
-    };
+    constructor(props: IProps) {
+        super(props);
 
-    onEmailAddressChanged = value => {
+        this.state = {
+            emailAddress: '',
+            emailBusy: false,
+        };
+    }
+
+    private onEmailAddressChanged = (value: string): void => {
         this.setState({
             emailAddress: value,
         });
     };
 
-    onSubmit = () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
+    private onSubmit = (): void => {
         const emailAddress = this.state.emailAddress;
         if (!Email.looksValid(emailAddress)) {
             Modal.createTrackedDialog('Invalid Email Address', '', ErrorDialog, {
@@ -58,8 +70,8 @@ export default class SetEmailDialog extends React.Component {
             });
             return;
         }
-        this._addThreepid = new AddThreepid();
-        this._addThreepid.addEmailAddress(emailAddress).then(() => {
+        this.addThreepid = new AddThreepid();
+        this.addThreepid.addEmailAddress(emailAddress).then(() => {
             Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
                 title: _t("Verification Pending"),
                 description: _t(
@@ -80,11 +92,11 @@ export default class SetEmailDialog extends React.Component {
         this.setState({ emailBusy: true });
     };
 
-    onCancelled = () => {
+    private onCancelled = (): void => {
         this.props.onFinished(false);
     };
 
-    onEmailDialogFinished = ok => {
+    private onEmailDialogFinished = (ok: boolean): void => {
         if (ok) {
             this.verifyEmailAddress();
         } else {
@@ -92,13 +104,12 @@ export default class SetEmailDialog extends React.Component {
         }
     };
 
-    verifyEmailAddress() {
-        this._addThreepid.checkEmailLinkClicked().then(() => {
+    private verifyEmailAddress(): void {
+        this.addThreepid.checkEmailLinkClicked().then(() => {
             this.props.onFinished(true);
         }, (err) => {
             this.setState({ emailBusy: false });
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 const message = _t("Unable to verify email address.") + " " +
                     _t("Please check your email and click on the link it contains. Once this is done, click continue.");
                 Modal.createTrackedDialog('Verification Pending', '3pid Auth Failed', QuestionDialog, {
@@ -108,7 +119,6 @@ export default class SetEmailDialog extends React.Component {
                     onFinished: this.onEmailDialogFinished,
                 });
             } else {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Unable to verify email address: " + err);
                 Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
                     title: _t("Unable to verify email address."),
@@ -118,15 +128,10 @@ export default class SetEmailDialog extends React.Component {
         });
     }
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const EditableText = sdk.getComponent('elements.EditableText');
-
+    public render(): JSX.Element {
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
             initialValue={this.state.emailAddress}
             className="mx_SetEmailDialog_email_input"
-            autoFocus="true"
             placeholder={_t("Email address")}
             placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
             blurToCancel={false}

src/components/views/dialogs/ShareDialog.tsx

@@ -158,7 +158,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             if (this.state.linkSpecificEvent) {
                 matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
             } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
+                matrixToUrl = this.props.permalinkCreator.forShareableRoom();
             }
         }
         return matrixToUrl;

src/components/views/dialogs/SlashCommandHelpDialog.tsx

@@ -17,11 +17,12 @@ limitations under the License.
 import React from 'react';
 import { _t } from "../../../languageHandler";
 import { CommandCategories, Commands } from "../../../SlashCommands";
-import * as sdk from "../../../index";
+import { IDialogProps } from "./IDialogProps";
+import InfoDialog from "./InfoDialog";
 
-export default ({ onFinished }) => {
-    const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+interface IProps extends IDialogProps {}
 
+const SlashCommandHelpDialog: React.FC<IProps> = ({ onFinished }) => {
     const categories = {};
     Commands.forEach(cmd => {
         if (!cmd.isEnabled()) return;
@@ -62,3 +63,5 @@ export default ({ onFinished }) => {
         hasCloseButton={true}
         onFinished={onFinished} />;
 };
+
+export default SlashCommandHelpDialog;

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -29,10 +29,12 @@ import SpaceSettingsVisibilityTab from "../spaces/SpaceSettingsVisibilityTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
+import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 
 export enum SpaceSettingsTab {
     General = "SPACE_GENERAL_TAB",
     Visibility = "SPACE_VISIBILITY_TAB",
+    Roles = "SPACE_ROLES_TAB",
     Advanced = "SPACE_ADVANCED_TAB",
 }
 
@@ -60,7 +62,13 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
                 SpaceSettingsTab.Visibility,
                 _td("Visibility"),
                 "mx_SpaceSettingsDialog_visibilityIcon",
-                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} />,
+                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} closeSettingsFn={onFinished} />,
+            ),
+            new Tab(
+                SpaceSettingsTab.Roles,
+                _td("Roles & Permissions"),
+                "mx_RoomSettingsDialog_rolesIcon",
+                <RolesRoomSettingsTab roomId={space.roomId} />,
             ),
             SettingsStore.getValue(UIFeature.AdvancedSettings)
                 ? new Tab(

src/components/views/dialogs/StorageEvictedDialog.tsx

@@ -15,40 +15,36 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import BugReportDialog from "./BugReportDialog";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps { }
 
 @replaceableComponent("views.dialogs.StorageEvictedDialog")
-export default class StorageEvictedDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _sendBugReport = ev => {
+export default class StorageEvictedDialog extends React.Component<IProps> {
+    private sendBugReport = (ev: React.MouseEvent): void => {
         ev.preventDefault();
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         Modal.createTrackedDialog('Storage evicted', 'Send Bug Report Dialog', BugReportDialog, {});
     };
 
-    _onSignOutClick = () => {
+    private onSignOutClick = (): void => {
         this.props.onFinished(true);
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
+    public render(): JSX.Element {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(
                 "To help us prevent this in future, please <a>send us logs</a>.",
                 {},
                 {
-                    a: text => <a href="#" onClick={this._sendBugReport}>{ text }</a>,
+                    a: text => <a href="#" onClick={this.sendBugReport}>{ text }</a>,
                 },
             );
         }
@@ -73,7 +69,7 @@ export default class StorageEvictedDialog extends React.Component {
                     ) } { logRequest }</p>
                 </div>
                 <DialogButtons primaryButton={_t("Sign out")}
-                    onPrimaryButtonClick={this._onSignOutClick}
+                    onPrimaryButtonClick={this.onSignOutClick}
                     focus={true}
                     hasCancel={false}
                 />

src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx

@@ -15,42 +15,47 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { Room } from "matrix-js-sdk/src/models/room";
-import * as sdk from '../../../index';
 import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms";
 import classNames from 'classnames';
 import * as ScalarMessaging from "../../../ScalarMessaging";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance";
+import ScalarAuthClient from "../../../ScalarAuthClient";
+import AccessibleButton from "../elements/AccessibleButton";
+import IntegrationManager from "../settings/IntegrationManager";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    /**
+     * Optional room where the integration manager should be open to
+     */
+    room?: Room;
+
+    /**
+     * Optional screen to open on the integration manager
+     */
+    screen?: string;
+
+    /**
+     * Optional integration ID to open in the integration manager
+     */
+    integrationId?: string;
+}
+
+interface IState {
+    managers: IntegrationManagerInstance[];
+    busy: boolean;
+    currentIndex: number;
+    currentConnected: boolean;
+    currentLoading: boolean;
+    currentScalarClient: ScalarAuthClient;
+}
 
 @replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog")
-export default class TabbedIntegrationManagerDialog extends React.Component {
-    static propTypes = {
-        /**
-         * Called with:
-         *     * success {bool} True if the user accepted any douments, false if cancelled
-         *     * agreedUrls {string[]} List of agreed URLs
-         */
-        onFinished: PropTypes.func.isRequired,
-
-        /**
-         * Optional room where the integration manager should be open to
-         */
-        room: PropTypes.instanceOf(Room),
-
-        /**
-         * Optional screen to open on the integration manager
-         */
-        screen: PropTypes.string,
-
-        /**
-         * Optional integration ID to open in the integration manager
-         */
-        integrationId: PropTypes.string,
-    };
-
-    constructor(props) {
+export default class TabbedIntegrationManagerDialog extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -63,11 +68,11 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         this.openManager(0, true);
     }
 
-    openManager = async (i, force = false) => {
+    private openManager = async (i: number, force = false): Promise<void> => {
         if (i === this.state.currentIndex && !force) return;
 
         const manager = this.state.managers[i];
@@ -120,8 +125,7 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         }
     };
 
-    _renderTabs() {
-        const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
+    private renderTabs(): JSX.Element[] {
         return this.state.managers.map((m, i) => {
             const classes = classNames({
                 'mx_TabbedIntegrationManagerDialog_tab': true,
@@ -140,8 +144,7 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         });
     }
 
-    _renderTab() {
-        const IntegrationManager = sdk.getComponent("views.settings.IntegrationManager");
+    public renderTab(): JSX.Element {
         let uiUrl = null;
         if (this.state.currentScalarClient) {
             uiUrl = this.state.currentScalarClient.getScalarInterfaceUrlForRoom(
@@ -151,7 +154,6 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
             );
         }
         return <IntegrationManager
-            configured={true}
             loading={this.state.currentLoading}
             connected={this.state.currentConnected}
             url={uiUrl}
@@ -159,14 +161,14 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         />;
     }
 
-    render() {
+    public render(): JSX.Element {
         return (
             <div className='mx_TabbedIntegrationManagerDialog_container'>
                 <div className='mx_TabbedIntegrationManagerDialog_tabs'>
-                    { this._renderTabs() }
+                    { this.renderTabs() }
                 </div>
                 <div className='mx_TabbedIntegrationManagerDialog_currentManager'>
-                    { this._renderTab() }
+                    { this.renderTab() }
                 </div>
             </div>
         );

src/components/views/dialogs/TextInputDialog.tsx

@@ -14,33 +14,39 @@ 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 React, { ChangeEvent, createRef } from 'react';
 import Field from "../elements/Field";
 import { _t, _td } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IFieldState, IValidationResult } from "../elements/Validation";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    title?: string;
+    description?: React.ReactNode;
+    value?: string;
+    placeholder?: string;
+    button?: string;
+    busyMessage?: string; // pass _td string
+    focus?: boolean;
+    hasCancel?: boolean;
+    validator?: (fieldState: IFieldState) => IValidationResult; // result of withValidation
+    fixedWidth?: boolean;
+}
+
+interface IState {
+    value: string;
+    busy: boolean;
+    valid: boolean;
+}
 
 @replaceableComponent("views.dialogs.TextInputDialog")
-export default class TextInputDialog extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-        description: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.string,
-        ]),
-        value: PropTypes.string,
-        placeholder: PropTypes.string,
-        button: PropTypes.string,
-        busyMessage: PropTypes.string, // pass _td string
-        focus: PropTypes.bool,
-        onFinished: PropTypes.func.isRequired,
-        hasCancel: PropTypes.bool,
-        validator: PropTypes.func, // result of withValidation
-        fixedWidth: PropTypes.bool,
-    };
+export default class TextInputDialog extends React.Component<IProps, IState> {
+    private field = createRef<Field>();
 
-    static defaultProps = {
+    public static defaultProps = {
         title: "",
         value: "",
         description: "",
@@ -49,11 +55,9 @@ export default class TextInputDialog extends React.Component {
         hasCancel: true,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this._field = createRef();
-
         this.state = {
             value: this.props.value,
             busy: false,
@@ -61,23 +65,23 @@ export default class TextInputDialog extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
             // this._field.current.value = this.props.value;
-            this._field.current.focus();
+            this.field.current.focus();
         }
     }
 
-    onOk = async ev => {
+    private onOk = async (ev: React.FormEvent): Promise<void> => {
         ev.preventDefault();
         if (this.props.validator) {
             this.setState({ busy: true });
-            await this._field.current.validate({ allowEmpty: false });
+            await this.field.current.validate({ allowEmpty: false });
 
-            if (!this._field.current.state.valid) {
-                this._field.current.focus();
-                this._field.current.validate({ allowEmpty: false, focused: true });
+            if (!this.field.current.state.valid) {
+                this.field.current.focus();
+                this.field.current.validate({ allowEmpty: false, focused: true });
                 this.setState({ busy: false });
                 return;
             }
@@ -85,17 +89,17 @@ export default class TextInputDialog extends React.Component {
         this.props.onFinished(true, this.state.value);
     };
 
-    onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    onChange = ev => {
+    private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             value: ev.target.value,
         });
     };
 
-    onValidate = async fieldState => {
+    private onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.props.validator(fieldState);
         this.setState({
             valid: result.valid,
@@ -103,9 +107,7 @@ export default class TextInputDialog extends React.Component {
         return result;
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_TextInputDialog"
@@ -121,13 +123,12 @@ export default class TextInputDialog extends React.Component {
                         <div>
                             <Field
                                 className="mx_TextInputDialog_input"
-                                ref={this._field}
+                                ref={this.field}
                                 type="text"
                                 label={this.props.placeholder}
                                 value={this.state.value}
                                 onChange={this.onChange}
                                 onValidate={this.props.validator ? this.onValidate : undefined}
-                                size="64"
                             />
                         </div>
                     </div>

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -19,7 +19,7 @@ import { User } from "matrix-js-sdk/src/models/user";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import E2EIcon from "../rooms/E2EIcon";
+import E2EIcon, { E2EState } from "../rooms/E2EIcon";
 import AccessibleButton from "../elements/AccessibleButton";
 import BaseDialog from "./BaseDialog";
 import { IDialogProps } from "./IDialogProps";
@@ -47,7 +47,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
         onFinished={onFinished}
         className="mx_UntrustedDeviceDialog"
         title={<>
-            <E2EIcon status="warning" size={24} hideTooltip={true} />
+            <E2EIcon status={E2EState.Warning} size={24} hideTooltip={true} />
             { _t("Not Trusted") }
         </>}
     >

src/components/views/dialogs/UploadFailureDialog.tsx

@@ -17,11 +17,18 @@ limitations under the License.
 import filesize from 'filesize';
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import { IDialogProps } from "./IDialogProps";
+
+interface IProps extends IDialogProps {
+    badFiles: File[];
+    totalFiles: number;
+    contentMessages: ContentMessages;
+}
 
 /*
  * Tells the user about files we know cannot be uploaded before we even try uploading
@@ -29,26 +36,16 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * the size of the file.
  */
 @replaceableComponent("views.dialogs.UploadFailureDialog")
-export default class UploadFailureDialog extends React.Component {
-    static propTypes = {
-        badFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
-        totalFiles: PropTypes.number.isRequired,
-        contentMessages: PropTypes.instanceOf(ContentMessages).isRequired,
-        onFinished: PropTypes.func.isRequired,
-    }
-
-    _onCancelClick = () => {
+export default class UploadFailureDialog extends React.Component<IProps> {
+    private onCancelClick = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
-    _onUploadClick = () => {
+    private onUploadClick = (): void => {
         this.props.onFinished(true);
-    }
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+    };
 
+    public render(): JSX.Element {
         let message;
         let preview;
         let buttons;
@@ -65,7 +62,7 @@ export default class UploadFailureDialog extends React.Component {
             );
             buttons = <DialogButtons primaryButton={_t('OK')}
                 hasCancel={false}
-                onPrimaryButtonClick={this._onCancelClick}
+                onPrimaryButtonClick={this.onCancelClick}
                 focus={true}
             />;
         } else if (this.props.totalFiles === this.props.badFiles.length) {
@@ -80,7 +77,7 @@ export default class UploadFailureDialog extends React.Component {
             );
             buttons = <DialogButtons primaryButton={_t('OK')}
                 hasCancel={false}
-                onPrimaryButtonClick={this._onCancelClick}
+                onPrimaryButtonClick={this.onCancelClick}
                 focus={true}
             />;
         } else {
@@ -96,17 +93,17 @@ export default class UploadFailureDialog extends React.Component {
             const howManyOthers = this.props.totalFiles - this.props.badFiles.length;
             buttons = <DialogButtons
                 primaryButton={_t('Upload %(count)s other files', { count: howManyOthers })}
-                onPrimaryButtonClick={this._onUploadClick}
+                onPrimaryButtonClick={this.onUploadClick}
                 hasCancel={true}
                 cancelButton={_t("Cancel All")}
-                onCancel={this._onCancelClick}
+                onCancel={this.onCancelClick}
                 focus={true}
             />;
         }
 
         return (
             <BaseDialog className='mx_UploadFailureDialog'
-                onFinished={this._onCancelClick}
+                onFinished={this.onCancelClick}
                 title={_t("Upload Error")}
                 contentId='mx_Dialog_content'
             >

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -33,6 +33,7 @@ import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab
 import { UIFeature } from "../../../settings/UIFeature";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseDialog from "./BaseDialog";
+import { IDialogProps } from "./IDialogProps";
 
 export enum UserTab {
     General = "USER_GENERAL_TAB",
@@ -47,8 +48,7 @@ export enum UserTab {
     Help = "USER_HELP_TAB",
 }
 
-interface IProps {
-    onFinished: (success: boolean) => void;
+interface IProps extends IDialogProps {
     initialTabId?: string;
 }
 

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,6 +20,7 @@ import { _t } from "../../../languageHandler";
 import { IDialogProps } from "./IDialogProps";
 import {
     Capability,
+    isTimelineCapability,
     Widget,
     WidgetEventCapability,
     WidgetKind,
@@ -30,14 +31,7 @@ import DialogButtons from "../elements/DialogButtons";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-
-export function getRememberedCapabilitiesForWidget(widget: Widget): Capability[] {
-    return JSON.parse(localStorage.getItem(`widget_${widget.id}_approved_caps`) || "[]");
-}
-
-function setRememberedCapabilitiesForWidget(widget: Widget, caps: Capability[]) {
-    localStorage.setItem(`widget_${widget.id}_approved_caps`, JSON.stringify(caps));
-}
+import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 
 interface IProps extends IDialogProps {
     requestedCapabilities: Set<Capability>;
@@ -95,14 +89,24 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
     };
 
     private closeAndTryRemember(approved: Capability[]) {
-        if (this.state.rememberSelection) {
-            setRememberedCapabilitiesForWidget(this.props.widget, approved);
-        }
-        this.props.onFinished({ approved });
+        this.props.onFinished({ approved, remember: this.state.rememberSelection });
     }
 
     public render() {
-        const checkboxRows = Object.entries(this.state.booleanStates).map(([cap, isChecked], i) => {
+        // We specifically order the timeline capabilities down to the bottom. The capability text
+        // generation cares strongly about this.
+        const orderedCapabilities = Object.entries(this.state.booleanStates).sort(([capA], [capB]) => {
+            const isTimelineA = isTimelineCapability(capA);
+            const isTimelineB = isTimelineCapability(capB);
+
+            if (!isTimelineA && !isTimelineB) return lexicographicCompare(capA, capB);
+            if (isTimelineA && !isTimelineB) return 1;
+            if (!isTimelineA && isTimelineB) return -1;
+            if (isTimelineA && isTimelineB) return lexicographicCompare(capA, capB);
+
+            return 0;
+        });
+        const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
             const text = CapabilityText.for(cap, this.props.widgetKind);
             const byline = text.byline
                 ? <span className="mx_WidgetCapabilitiesPromptDialog_byline">{ text.byline }</span>

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 Travis Ralston
+Copyright 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,42 +16,48 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from "../../../languageHandler";
-import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import { Widget } from "matrix-widget-api";
+import { Widget, WidgetKind } from "matrix-widget-api";
 import { OIDCState, WidgetPermissionStore } from "../../../stores/widgets/WidgetPermissionStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+import { logger } from "matrix-js-sdk/src/logger";
+
+interface IProps extends IDialogProps {
+    widget: Widget;
+    widgetKind: WidgetKind;
+    inRoomId?: string;
+}
+
+interface IState {
+    rememberSelection: boolean;
+}
 
 @replaceableComponent("views.dialogs.WidgetOpenIDPermissionsDialog")
-export default class WidgetOpenIDPermissionsDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        widget: PropTypes.objectOf(Widget).isRequired,
-        widgetKind: PropTypes.string.isRequired, // WidgetKind from widget-api
-        inRoomId: PropTypes.string,
-    };
-
-    constructor() {
-        super();
+export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             rememberSelection: false,
         };
     }
 
-    _onAllow = () => {
-        this._onPermissionSelection(true);
+    private onAllow = (): void => {
+        this.onPermissionSelection(true);
     };
 
-    _onDeny = () => {
-        this._onPermissionSelection(false);
+    private onDeny = (): void => {
+        this.onPermissionSelection(false);
     };
 
-    _onPermissionSelection(allowed) {
+    private onPermissionSelection(allowed: boolean): void {
         if (this.state.rememberSelection) {
-            console.log(`Remembering ${this.props.widgetId} as allowed=${allowed} for OpenID`);
+            logger.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
 
             WidgetPermissionStore.instance.setOIDCState(
                 this.props.widget, this.props.widgetKind, this.props.inRoomId,
@@ -61,14 +68,11 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
         this.props.onFinished(allowed);
     }
 
-    _onRememberSelectionChange = (newVal) => {
+    private onRememberSelectionChange = (newVal: boolean): void => {
         this.setState({ rememberSelection: newVal });
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className='mx_WidgetOpenIDPermissionsDialog'
@@ -87,13 +91,13 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Continue")}
-                    onPrimaryButtonClick={this._onAllow}
-                    onCancel={this._onDeny}
+                    onPrimaryButtonClick={this.onAllow}
+                    onCancel={this.onDeny}
                     additive={
                         <LabelledToggleSwitch
                             value={this.state.rememberSelection}
                             toggleInFront={true}
-                            onChange={this._onRememberSelectionChange}
+                            onChange={this.onRememberSelectionChange}
                             label={_t("Remember this")} />}
                 />
             </BaseDialog>

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

@@ -28,6 +28,8 @@ import Spinner from '../../elements/Spinner';
 import InteractiveAuthDialog from '../InteractiveAuthDialog';
 import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 interface IProps {
     accountPassword?: string;
     tokenLogin?: boolean;
@@ -77,10 +79,10 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
             // 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!");
+            logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
         } catch (error) {
             if (!error.data || !error.data.flows) {
-                console.log("uploadDeviceSigningKeys advertised no flows!");
+                logger.log("uploadDeviceSigningKeys advertised no flows!");
                 return;
             }
             const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {

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

@@ -16,30 +16,64 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../../index';
 import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';
+import { IKeyBackupInfo, IKeyBackupRestoreResult } from "matrix-js-sdk/src/crypto/keybackup";
+import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
+import * as sdk from '../../../../index';
+import { IDialogProps } from "../IDialogProps";
+import { logger } from "matrix-js-sdk/src/logger";
 
-const RESTORE_TYPE_PASSPHRASE = 0;
-const RESTORE_TYPE_RECOVERYKEY = 1;
-const RESTORE_TYPE_SECRET_STORAGE = 2;
+enum RestoreType {
+    Passphrase = "passphrase",
+    RecoveryKey = "recovery_key",
+    SecretStorage = "secret_storage"
+}
+
+enum ProgressState {
+    PreFetch = "prefetch",
+    Fetch = "fetch",
+    LoadKeys = "load_keys",
+
+}
+
+interface IProps extends IDialogProps {
+    // if false, will close the dialog as soon as the restore completes succesfully
+    // default: true
+    showSummary?: boolean;
+    // If specified, gather the key from the user but then call the function with the backup
+    // key rather than actually (necessarily) restoring the backup.
+    keyCallback?: (key: Uint8Array) => void;
+}
+
+interface IState {
+    backupInfo: IKeyBackupInfo;
+    backupKeyStored: Record<string, ISecretStorageKeyInfo>;
+    loading: boolean;
+    loadError: string;
+    restoreError: {
+        errcode: string;
+    };
+    recoveryKey: string;
+    recoverInfo: IKeyBackupRestoreResult;
+    recoveryKeyValid: boolean;
+    forceRecoveryKey: boolean;
+    passPhrase: string;
+    restoreType: RestoreType;
+    progress: {
+        stage: ProgressState;
+        total?: number;
+        successes?: number;
+        failures?: number;
+    };
+}
 
 /*
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
-export default class RestoreKeyBackupDialog extends React.PureComponent {
-    static propTypes = {
-        // if false, will close the dialog as soon as the restore completes succesfully
-        // default: true
-        showSummary: PropTypes.bool,
-        // If specified, gather the key from the user but then call the function with the backup
-        // key rather than actually (necessarily) restoring the backup.
-        keyCallback: PropTypes.func,
-    };
-
+export default class RestoreKeyBackupDialog extends React.PureComponent<IProps, IState> {
     static defaultProps = {
         showSummary: true,
     };
@@ -58,58 +92,58 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             restoreType: null,
-            progress: { stage: "prefetch" },
+            progress: { stage: ProgressState.PreFetch },
         };
     }
 
-    componentDidMount() {
-        this._loadBackupStatus();
+    public componentDidMount(): void {
+        this.loadBackupStatus();
     }
 
-    _onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
-    _onDone = () => {
+    private onDone = (): void => {
         this.props.onFinished(true);
-    }
+    };
 
-    _onUseRecoveryKeyClick = () => {
+    private onUseRecoveryKeyClick = (): void => {
         this.setState({
             forceRecoveryKey: true,
         });
-    }
+    };
 
-    _progressCallback = (data) => {
+    private progressCallback = (data): void => {
         this.setState({
             progress: data,
         });
-    }
+    };
 
-    _onResetRecoveryClick = () => {
+    private onResetRecoveryClick = (): void => {
         this.props.onFinished(false);
-        accessSecretStorage(() => {}, /* forceReset = */ true);
-    }
+        accessSecretStorage(async () => {}, /* forceReset = */ true);
+    };
 
-    _onRecoveryKeyChange = (e) => {
+    private onRecoveryKeyChange = (e): void => {
         this.setState({
             recoveryKey: e.target.value,
             recoveryKeyValid: MatrixClientPeg.get().isValidRecoveryKey(e.target.value),
         });
-    }
+    };
 
-    _onPassPhraseNext = async () => {
+    private onPassPhraseNext = async (): Promise<void> => {
         this.setState({
             loading: true,
             restoreError: null,
-            restoreType: RESTORE_TYPE_PASSPHRASE,
+            restoreType: RestoreType.Passphrase,
         });
         try {
             // We do still restore the key backup: we must ensure that the key backup key
             // is the right one and restoring it is currently the only way we can do this.
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
-                { progressCallback: this._progressCallback },
+                { progressCallback: this.progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = await MatrixClientPeg.get().keyBackupKeyFromPassword(
@@ -127,26 +161,26 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 recoverInfo,
             });
         } catch (e) {
-            console.log("Error restoring backup", e);
+            logger.log("Error restoring backup", e);
             this.setState({
                 loading: false,
                 restoreError: e,
             });
         }
-    }
+    };
 
-    _onRecoveryKeyNext = async () => {
+    private onRecoveryKeyNext = async (): Promise<void> => {
         if (!this.state.recoveryKeyValid) return;
 
         this.setState({
             loading: true,
             restoreError: null,
-            restoreType: RESTORE_TYPE_RECOVERYKEY,
+            restoreType: RestoreType.RecoveryKey,
         });
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
-                { progressCallback: this._progressCallback },
+                { progressCallback: this.progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = MatrixClientPeg.get().keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
@@ -161,40 +195,39 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 recoverInfo,
             });
         } catch (e) {
-            console.log("Error restoring backup", e);
+            logger.log("Error restoring backup", e);
             this.setState({
                 loading: false,
                 restoreError: e,
             });
         }
-    }
+    };
 
-    _onPassPhraseChange = (e) => {
+    private onPassPhraseChange = (e): void => {
         this.setState({
             passPhrase: e.target.value,
         });
-    }
+    };
 
-    async _restoreWithSecretStorage() {
+    private async restoreWithSecretStorage(): Promise<void> {
         this.setState({
             loading: true,
             restoreError: null,
-            restoreType: RESTORE_TYPE_SECRET_STORAGE,
+            restoreType: RestoreType.SecretStorage,
         });
         try {
             // `accessSecretStorage` may prompt for storage access as needed.
-            const recoverInfo = await accessSecretStorage(async () => {
-                return MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
+            await accessSecretStorage(async () => {
+                await MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
                     this.state.backupInfo, undefined, undefined,
-                    { progressCallback: this._progressCallback },
+                    { progressCallback: this.progressCallback },
                 );
             });
             this.setState({
                 loading: false,
-                recoverInfo,
             });
         } catch (e) {
-            console.log("Error restoring backup", e);
+            logger.log("Error restoring backup", e);
             this.setState({
                 restoreError: e,
                 loading: false,
@@ -202,26 +235,26 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         }
     }
 
-    async _restoreWithCachedKey(backupInfo) {
+    private async restoreWithCachedKey(backupInfo): Promise<boolean> {
         if (!backupInfo) return false;
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithCache(
                 undefined, /* targetRoomId */
                 undefined, /* targetSessionId */
                 backupInfo,
-                { progressCallback: this._progressCallback },
+                { progressCallback: this.progressCallback },
             );
             this.setState({
                 recoverInfo,
             });
             return true;
         } catch (e) {
-            console.log("restoreWithCachedKey failed:", e);
+            logger.log("restoreWithCachedKey failed:", e);
             return false;
         }
     }
 
-    async _loadBackupStatus() {
+    private async loadBackupStatus(): Promise<void> {
         this.setState({
             loading: true,
             loadError: null,
@@ -230,15 +263,15 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             const cli = MatrixClientPeg.get();
             const backupInfo = await cli.getKeyBackupVersion();
             const has4S = await cli.hasSecretStorageKey();
-            const backupKeyStored = has4S && await cli.isKeyBackupKeyStored();
+            const backupKeyStored = has4S && (await cli.isKeyBackupKeyStored());
             this.setState({
                 backupInfo,
                 backupKeyStored,
             });
 
-            const gotCache = await this._restoreWithCachedKey(backupInfo);
+            const gotCache = await this.restoreWithCachedKey(backupInfo);
             if (gotCache) {
-                console.log("RestoreKeyBackupDialog: found cached backup key");
+                logger.log("RestoreKeyBackupDialog: found cached backup key");
                 this.setState({
                     loading: false,
                 });
@@ -247,7 +280,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
 
             // If the backup key is stored, we can proceed directly to restore.
             if (backupKeyStored) {
-                return this._restoreWithSecretStorage();
+                return this.restoreWithSecretStorage();
             }
 
             this.setState({
@@ -255,7 +288,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 loading: false,
             });
         } catch (e) {
-            console.log("Error loading backup status", e);
+            logger.log("Error loading backup status", e);
             this.setState({
                 loadError: e,
                 loading: false,
@@ -263,7 +296,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         }
     }
 
-    render() {
+    public render(): JSX.Element {
+        // FIXME: Making these into imports will break tests
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Spinner = sdk.getComponent("elements.Spinner");
 
@@ -279,12 +315,12 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         if (this.state.loading) {
             title = _t("Restoring keys from backup");
             let details;
-            if (this.state.progress.stage === "fetch") {
+            if (this.state.progress.stage === ProgressState.Fetch) {
                 details = _t("Fetching keys from server...");
-            } else if (this.state.progress.stage === "load_keys") {
+            } else if (this.state.progress.stage === ProgressState.LoadKeys) {
                 const { total, successes, failures } = this.state.progress;
                 details = _t("%(completed)s of %(total)s keys restored", { total, completed: successes + failures });
-            } else if (this.state.progress.stage === "prefetch") {
+            } else if (this.state.progress.stage === ProgressState.PreFetch) {
                 details = _t("Fetching keys from server...");
             }
             content = <div>
@@ -296,7 +332,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = _t("Unable to load backup status");
         } else if (this.state.restoreError) {
             if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
-                if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
+                if (this.state.restoreType === RestoreType.RecoveryKey) {
                     title = _t("Security Key mismatch");
                     content = <div>
                         <p>{ _t(
@@ -321,7 +357,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             title = _t("Error");
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             title = _t("Keys restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
@@ -334,14 +369,12 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 <p>{ _t("Successfully restored %(sessionCount)s keys", { sessionCount: this.state.recoverInfo.imported }) }</p>
                 { failedToDecrypt }
                 <DialogButtons primaryButton={_t('OK')}
-                    onPrimaryButtonClick={this._onDone}
+                    onPrimaryButtonClick={this.onDone}
                     hasCancel={false}
                     focus={true}
                 />
             </div>;
         } else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             title = _t("Enter Security Phrase");
             content = <div>
                 <p>{ _t(
@@ -357,16 +390,16 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 <form className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input type="password"
                         className="mx_RestoreKeyBackupDialog_passPhraseInput"
-                        onChange={this._onPassPhraseChange}
+                        onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}
                         autoFocus={true}
                     />
                     <DialogButtons
                         primaryButton={_t('Next')}
-                        onPrimaryButtonClick={this._onPassPhraseNext}
+                        onPrimaryButtonClick={this.onPassPhraseNext}
                         primaryIsSubmit={true}
                         hasCancel={true}
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                     />
                 </form>
@@ -379,14 +412,14 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                         button1: s => <AccessibleButton
                             className="mx_linkButton"
                             element="span"
-                            onClick={this._onUseRecoveryKeyClick}
+                            onClick={this.onUseRecoveryKeyClick}
                         >
                             { s }
                         </AccessibleButton>,
                         button2: s => <AccessibleButton
                             className="mx_linkButton"
                             element="span"
-                            onClick={this._onResetRecoveryClick}
+                            onClick={this.onResetRecoveryClick}
                         >
                             { s }
                         </AccessibleButton>,
@@ -394,8 +427,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             </div>;
         } else {
             title = _t("Enter Security Key");
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
             let keyStatus;
             if (this.state.recoveryKey.length === 0) {
@@ -423,15 +454,15 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
 
                 <div className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
-                        onChange={this._onRecoveryKeyChange}
+                        onChange={this.onRecoveryKeyChange}
                         value={this.state.recoveryKey}
                         autoFocus={true}
                     />
                     { keyStatus }
                     <DialogButtons primaryButton={_t('Next')}
-                        onPrimaryButtonClick={this._onRecoveryKeyNext}
+                        onPrimaryButtonClick={this.onRecoveryKeyNext}
                         hasCancel={true}
-                        onCancel={this._onCancel}
+                        onCancel={this.onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
@@ -443,7 +474,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     {
                         button: s => <AccessibleButton className="mx_linkButton"
                             element="span"
-                            onClick={this._onResetRecoveryClick}
+                            onClick={this.onResetRecoveryClick}
                         >
                             { s }
                         </AccessibleButton>,

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

@@ -20,6 +20,7 @@ import BaseDialog from '../BaseDialog';
 import { _t } from '../../../../languageHandler';
 import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
 import { replaceableComponent } from "../../../../utils/replaceableComponent";
+import { IDialogProps } from "../IDialogProps";
 
 function iconFromPhase(phase: Phase) {
     if (phase === Phase.Done) {
@@ -29,12 +30,9 @@ function iconFromPhase(phase: Phase) {
     }
 }
 
-interface IProps {
-    onFinished: (success: boolean) => void;
-}
-
+interface IProps extends IDialogProps {}
 interface IState {
-    icon: Phase;
+    icon: string;
 }
 
 @replaceableComponent("views.dialogs.security.SetupEncryptionDialog")

src/components/views/elements/AccessibleButton.tsx

@@ -19,7 +19,7 @@ import React, { ReactHTML } from 'react';
 import { Key } from '../../../Keyboard';
 import classnames from 'classnames';
 
-export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
+export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element> | React.FormEvent<Element>;
 
 /**
  * children: React's magic prop. Represents all children given to the element.
@@ -39,7 +39,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     tabIndex?: number;
     disabled?: boolean;
     className?: string;
-    onClick(e?: ButtonEvent): void;
+    onClick(e?: ButtonEvent): void | Promise<void>;
 }
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -25,6 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
     tooltip?: React.ReactNode;
+    label?: React.ReactNode;
     tooltipClassName?: string;
     forceHide?: boolean;
     yOffset?: number;
@@ -84,7 +85,8 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
                 aria-label={title}
             >
                 { children }
-                { tip }
+                { this.props.label }
+                { (tooltip || title) && tip }
             </AccessibleButton>
         );
     }

src/components/views/elements/AppTile.tsx

@@ -19,7 +19,6 @@ limitations under the License.
 
 import url from 'url';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
@@ -39,33 +38,97 @@ import { MatrixCapabilities } from "matrix-widget-api";
 import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { IApp } from "../../../stores/WidgetStore";
+
+interface IProps {
+    app: IApp;
+    // If room is not specified then it is an account level widget
+    // which bypasses permission prompts as it was added explicitly by that user
+    room: Room;
+    // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
+    // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
+    fullWidth?: boolean;
+    // Optional. If set, renders a smaller view of the widget
+    miniMode?: boolean;
+    // UserId of the current user
+    userId: string;
+    // UserId of the entity that added / modified the widget
+    creatorUserId: string;
+    waitForIframeLoad: boolean;
+    showMenubar?: boolean;
+    // Optional onEditClickHandler (overrides default behaviour)
+    onEditClick?: () => void;
+    // Optional onDeleteClickHandler (overrides default behaviour)
+    onDeleteClick?: () => void;
+    // Optionally hide the tile title
+    showTitle?: boolean;
+    // Optionally handle minimise button pointer events (default false)
+    handleMinimisePointerEvents?: boolean;
+    // Optionally hide the popout widget icon
+    showPopout?: boolean;
+    // Is this an instance of a user widget
+    userWidget: boolean;
+    // sets the pointer-events property on the iframe
+    pointerEvents?: string;
+    widgetPageTitle?: string;
+}
+
+interface IState {
+    initialising: boolean; // True while we are mangling the widget URL
+    // True while the iframe content is loading
+    loading: boolean;
+    // Assume that widget has permission to load if we are the user who
+    // added it to the room, or if explicitly granted by the user
+    hasPermissionToLoad: boolean;
+    error: Error;
+    menuDisplayed: boolean;
+    widgetPageTitle: string;
+}
+
+import { logger } from "matrix-js-sdk/src/logger";
 
 @replaceableComponent("views.elements.AppTile")
-export default class AppTile extends React.Component {
-    constructor(props) {
+export default class AppTile extends React.Component<IProps, IState> {
+    public static defaultProps: Partial<IProps> = {
+        waitForIframeLoad: true,
+        showMenubar: true,
+        showTitle: true,
+        showPopout: true,
+        handleMinimisePointerEvents: false,
+        userWidget: false,
+        miniMode: false,
+    };
+
+    private contextMenuButton = createRef<any>();
+    private iframe: HTMLIFrameElement; // ref to the iframe (callback style)
+    private allowedWidgetsWatchRef: string;
+    private persistKey: string;
+    private sgWidget: StopGapWidget;
+    private dispatcherRef: string;
+
+    constructor(props: IProps) {
         super(props);
 
         // The key used for PersistedElement
-        this._persistKey = getPersistKey(this.props.app.id);
+        this.persistKey = getPersistKey(this.props.app.id);
         try {
-            this._sgWidget = new StopGapWidget(this.props);
-            this._sgWidget.on("preparing", this._onWidgetPrepared);
-            this._sgWidget.on("ready", this._onWidgetReady);
+            this.sgWidget = new StopGapWidget(this.props);
+            this.sgWidget.on("preparing", this.onWidgetPrepared);
+            this.sgWidget.on("ready", this.onWidgetReady);
         } catch (e) {
-            console.log("Failed to construct widget", e);
-            this._sgWidget = null;
+            logger.log("Failed to construct widget", e);
+            this.sgWidget = null;
         }
-        this.iframe = null; // ref to the iframe (callback style)
 
-        this.state = this._getNewState(props);
-        this._contextMenuButton = createRef();
+        this.state = this.getNewState(props);
 
-        this._allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
+        this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
     }
 
     // This is a function to make the impact of calling SettingsStore slightly less
-    hasPermissionToLoad = (props) => {
-        if (this._usingLocalWidget()) return true;
+    private hasPermissionToLoad = (props: IProps): boolean => {
+        if (this.usingLocalWidget()) return true;
         if (!props.room) return true; // user widgets always have permissions
 
         const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", props.room.roomId);
@@ -81,34 +144,34 @@ export default class AppTile extends React.Component {
      * @param  {Object} newProps The new properties of the component
      * @return {Object} Updated component state to be set with setState
      */
-    _getNewState(newProps) {
+    private getNewState(newProps: IProps): IState {
         return {
             initialising: true, // True while we are mangling the widget URL
             // True while the iframe content is loading
-            loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
+            loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey),
             // Assume that widget has permission to load if we are the user who
             // added it to the room, or if explicitly granted by the user
             hasPermissionToLoad: this.hasPermissionToLoad(newProps),
             error: null,
-            widgetPageTitle: newProps.widgetPageTitle,
             menuDisplayed: false,
+            widgetPageTitle: this.props.widgetPageTitle,
         };
     }
 
-    onAllowedWidgetsChange = () => {
+    private onAllowedWidgetsChange = (): void => {
         const hasPermissionToLoad = this.hasPermissionToLoad(this.props);
 
         if (this.state.hasPermissionToLoad && !hasPermissionToLoad) {
             // Force the widget to be non-persistent (able to be deleted/forgotten)
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
-            PersistedElement.destroyElement(this._persistKey);
-            if (this._sgWidget) this._sgWidget.stop();
+            PersistedElement.destroyElement(this.persistKey);
+            if (this.sgWidget) this.sgWidget.stop();
         }
 
         this.setState({ hasPermissionToLoad });
     };
 
-    isMixedContent() {
+    private isMixedContent(): boolean {
         const parentContentProtocol = window.location.protocol;
         const u = url.parse(this.props.app.url);
         const childContentProtocol = u.protocol;
@@ -120,69 +183,70 @@ export default class AppTile extends React.Component {
         return false;
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         // Only fetch IM token on mount if we're showing and have permission to load
-        if (this._sgWidget && this.state.hasPermissionToLoad) {
-            this._startWidget();
+        if (this.sgWidget && this.state.hasPermissionToLoad) {
+            this.startWidget();
         }
 
         // Widget action listeners
-        this.dispatcherRef = dis.register(this._onAction);
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         // Widget action listeners
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
 
         // if it's not remaining on screen, get rid of the PersistedElement container
         if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
-            PersistedElement.destroyElement(this._persistKey);
+            PersistedElement.destroyElement(this.persistKey);
         }
 
-        if (this._sgWidget) {
-            this._sgWidget.stop();
+        if (this.sgWidget) {
+            this.sgWidget.stop();
         }
 
-        SettingsStore.unwatchSetting(this._allowedWidgetsWatchRef);
+        SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
     }
 
-    _resetWidget(newProps) {
-        if (this._sgWidget) {
-            this._sgWidget.stop();
+    private resetWidget(newProps: IProps): void {
+        if (this.sgWidget) {
+            this.sgWidget.stop();
         }
         try {
-            this._sgWidget = new StopGapWidget(newProps);
-            this._sgWidget.on("preparing", this._onWidgetPrepared);
-            this._sgWidget.on("ready", this._onWidgetReady);
-            this._startWidget();
+            this.sgWidget = new StopGapWidget(newProps);
+            this.sgWidget.on("preparing", this.onWidgetPrepared);
+            this.sgWidget.on("ready", this.onWidgetReady);
+            this.startWidget();
         } catch (e) {
-            console.log("Failed to construct widget", e);
-            this._sgWidget = null;
+            logger.log("Failed to construct widget", e);
+            this.sgWidget = null;
         }
     }
 
-    _startWidget() {
-        this._sgWidget.prepare().then(() => {
+    private startWidget(): void {
+        this.sgWidget.prepare().then(() => {
             this.setState({ initialising: false });
         });
     }
 
-    _iframeRefChange = (ref) => {
+    private iframeRefChange = (ref: HTMLIFrameElement): void => {
         this.iframe = ref;
         if (ref) {
-            if (this._sgWidget) this._sgWidget.start(ref);
+            if (this.sgWidget) this.sgWidget.start(ref);
         } else {
-            this._resetWidget(this.props);
+            this.resetWidget(this.props);
         }
     };
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    public UNSAFE_componentWillReceiveProps(nextProps: IProps): void { // eslint-disable-line camelcase
         if (nextProps.app.url !== this.props.app.url) {
-            this._getNewState(nextProps);
+            this.getNewState(nextProps);
             if (this.state.hasPermissionToLoad) {
-                this._resetWidget(nextProps);
+                this.resetWidget(nextProps);
             }
         }
 
@@ -198,7 +262,7 @@ export default class AppTile extends React.Component {
      * @private
      * @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
      */
-    async _endWidgetActions() { // widget migration dev note: async to maintain signature
+    private async endWidgetActions(): Promise<void> { // widget migration dev note: async to maintain signature
         // HACK: This is a really dirty way to ensure that Jitsi cleans up
         // its hold on the webcam. Without this, the widget holds a media
         // stream open, even after death. See https://github.com/vector-im/element-web/issues/7351
@@ -217,27 +281,27 @@ export default class AppTile extends React.Component {
         }
 
         // Delete the widget from the persisted store for good measure.
-        PersistedElement.destroyElement(this._persistKey);
+        PersistedElement.destroyElement(this.persistKey);
         ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
 
-        if (this._sgWidget) this._sgWidget.stop({ forceDestroy: true });
+        if (this.sgWidget) this.sgWidget.stop({ forceDestroy: true });
     }
 
-    _onWidgetPrepared = () => {
+    private onWidgetPrepared = (): void => {
         this.setState({ loading: false });
     };
 
-    _onWidgetReady = () => {
+    private onWidgetReady = (): void => {
         if (WidgetType.JITSI.matches(this.props.app.type)) {
-            this._sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
+            this.sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
         }
     };
 
-    _onAction = payload => {
+    private onAction = (payload): void => {
         if (payload.widgetId === this.props.app.id) {
             switch (payload.action) {
                 case 'm.sticker':
-                    if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
+                    if (this.sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
                         dis.dispatch({ action: 'post_sticker_message', data: payload.data });
                         dis.dispatch({ action: 'stickerpicker_close' });
                     } else {
@@ -248,7 +312,7 @@ export default class AppTile extends React.Component {
         }
     };
 
-    _grantWidgetPermission = () => {
+    private grantWidgetPermission = (): void => {
         const roomId = this.props.room.roomId;
         console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
@@ -258,14 +322,14 @@ export default class AppTile extends React.Component {
             this.setState({ hasPermissionToLoad: true });
 
             // Fetch a token for the integration manager, now that we're allowed to
-            this._startWidget();
+            this.startWidget();
         }).catch(err => {
             console.error(err);
             // We don't really need to do anything about this - the user will just hit the button again.
         });
     };
 
-    formatAppTileName() {
+    private formatAppTileName(): string {
         let appTileName = "No name";
         if (this.props.app.name && this.props.app.name.trim()) {
             appTileName = this.props.app.name.trim();
@@ -278,11 +342,11 @@ export default class AppTile extends React.Component {
      * actual widget URL
      * @returns {bool} true If using a local version of the widget
      */
-    _usingLocalWidget() {
+    private usingLocalWidget(): boolean {
         return WidgetType.JITSI.matches(this.props.app.type);
     }
 
-    _getTileTitle() {
+    private getTileTitle(): JSX.Element {
         const name = this.formatAppTileName();
         const titleSpacer = <span>&nbsp;-&nbsp;</span>;
         let title = '';
@@ -300,32 +364,32 @@ export default class AppTile extends React.Component {
     }
 
     // TODO replace with full screen interactions
-    _onPopoutWidgetClick = () => {
+    private onPopoutWidgetClick = (): void => {
         // Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them
         // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
         if (WidgetType.JITSI.matches(this.props.app.type)) {
-            this._endWidgetActions().then(() => {
+            this.endWidgetActions().then(() => {
                 if (this.iframe) {
                     // Reload iframe
-                    this.iframe.src = this._sgWidget.embedUrl;
+                    this.iframe.src = this.sgWidget.embedUrl;
                 }
             });
         }
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
+            { target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
     };
 
-    _onContextMenuClick = () => {
+    private onContextMenuClick = (): void => {
         this.setState({ menuDisplayed: true });
     };
 
-    _closeContextMenu = () => {
+    private closeContextMenu = (): void => {
         this.setState({ menuDisplayed: false });
     };
 
-    render() {
+    public render(): JSX.Element {
         let appTileBody;
 
         // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
@@ -351,7 +415,7 @@ export default class AppTile extends React.Component {
                 <Spinner message={_t("Loading...")} />
             </div>
         );
-        if (this._sgWidget === null) {
+        if (this.sgWidget === null) {
             appTileBody = (
                 <div className={appTileBodyClass} style={appTileBodyStyles}>
                     <AppWarning errorMsg={_t("Error loading Widget")} />
@@ -365,9 +429,9 @@ export default class AppTile extends React.Component {
                     <AppPermission
                         roomId={this.props.room.roomId}
                         creatorUserId={this.props.creatorUserId}
-                        url={this._sgWidget.embedUrl}
+                        url={this.sgWidget.embedUrl}
                         isRoomEncrypted={isEncrypted}
-                        onPermissionGranted={this._grantWidgetPermission}
+                        onPermissionGranted={this.grantWidgetPermission}
                     />
                 </div>
             );
@@ -390,8 +454,8 @@ export default class AppTile extends React.Component {
                         { this.state.loading && loadingElement }
                         <iframe
                             allow={iframeFeatures}
-                            ref={this._iframeRefChange}
-                            src={this._sgWidget.embedUrl}
+                            ref={this.iframeRefChange}
+                            src={this.sgWidget.embedUrl}
                             allowFullScreen={true}
                             sandbox={sandboxFlags}
                         />
@@ -407,7 +471,7 @@ export default class AppTile extends React.Component {
                     // Also wrap the PersistedElement in a div to fix the height, otherwise
                     // AppTile's border is in the wrong place
                     appTileBody = <div className="mx_AppTile_persistedWrapper">
-                        <PersistedElement persistKey={this._persistKey}>
+                        <PersistedElement persistKey={this.persistKey}>
                             { appTileBody }
                         </PersistedElement>
                     </div>;
@@ -429,9 +493,9 @@ export default class AppTile extends React.Component {
         if (this.state.menuDisplayed) {
             contextMenu = (
                 <RoomWidgetContextMenu
-                    {...aboveLeftOf(this._contextMenuButton.current.getBoundingClientRect(), null)}
+                    {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect(), null)}
                     app={this.props.app}
-                    onFinished={this._closeContextMenu}
+                    onFinished={this.closeContextMenu}
                     showUnpin={!this.props.userWidget}
                     userWidget={this.props.userWidget}
                     onEditClick={this.props.onEditClick}
@@ -444,21 +508,21 @@ export default class AppTile extends React.Component {
             <div className={appTileClasses} id={this.props.app.id}>
                 { this.props.showMenubar &&
                     <div className="mx_AppTileMenuBar">
-                        <span className="mx_AppTileMenuBarTitle" style={{ pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false) }}>
-                            { this.props.showTitle && this._getTileTitle() }
+                        <span className="mx_AppTileMenuBarTitle" style={{ pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : "none") }}>
+                            { this.props.showTitle && this.getTileTitle() }
                         </span>
                         <span className="mx_AppTileMenuBarWidgets">
                             { this.props.showPopout && <AccessibleButton
                                 className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
                                 title={_t('Popout widget')}
-                                onClick={this._onPopoutWidgetClick}
+                                onClick={this.onPopoutWidgetClick}
                             /> }
                             <ContextMenuButton
                                 className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
                                 label={_t("Options")}
                                 isExpanded={this.state.menuDisplayed}
-                                inputRef={this._contextMenuButton}
-                                onClick={this._onContextMenuClick}
+                                inputRef={this.contextMenuButton}
+                                onClick={this.onContextMenuClick}
                             />
                         </span>
                     </div> }
@@ -469,49 +533,3 @@ export default class AppTile extends React.Component {
         </React.Fragment>;
     }
 }
-
-AppTile.displayName = 'AppTile';
-
-AppTile.propTypes = {
-    app: PropTypes.object.isRequired,
-    // If room is not specified then it is an account level widget
-    // which bypasses permission prompts as it was added explicitly by that user
-    room: PropTypes.object,
-    // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
-    // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
-    fullWidth: PropTypes.bool,
-    // Optional. If set, renders a smaller view of the widget
-    miniMode: PropTypes.bool,
-    // UserId of the current user
-    userId: PropTypes.string.isRequired,
-    // UserId of the entity that added / modified the widget
-    creatorUserId: PropTypes.string,
-    waitForIframeLoad: PropTypes.bool,
-    showMenubar: PropTypes.bool,
-    // Optional onEditClickHandler (overrides default behaviour)
-    onEditClick: PropTypes.func,
-    // Optional onDeleteClickHandler (overrides default behaviour)
-    onDeleteClick: PropTypes.func,
-    // Optional onMinimiseClickHandler
-    onMinimiseClick: PropTypes.func,
-    // Optionally hide the tile title
-    showTitle: PropTypes.bool,
-    // Optionally handle minimise button pointer events (default false)
-    handleMinimisePointerEvents: PropTypes.bool,
-    // Optionally hide the popout widget icon
-    showPopout: PropTypes.bool,
-    // Is this an instance of a user widget
-    userWidget: PropTypes.bool,
-    // sets the pointer-events property on the iframe
-    pointerEvents: PropTypes.string,
-};
-
-AppTile.defaultProps = {
-    waitForIframeLoad: true,
-    showMenubar: true,
-    showTitle: true,
-    showPopout: true,
-    handleMinimisePointerEvents: false,
-    userWidget: false,
-    miniMode: false,
-};

src/components/views/elements/AppWarning.tsx

@@ -1,24 +1,20 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const AppWarning = (props) => {
+interface IProps {
+    errorMsg?: string;
+}
+
+const AppWarning: React.FC<IProps> = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
                 <img src={require("../../../../res/img/warning.svg")} alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
-                <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
+                <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>
             </div>
         </div>
     );
 };
 
-AppWarning.propTypes = {
-    errorMsg: PropTypes.string,
-};
-AppWarning.defaultProps = {
-    errorMsg: 'Error',
-};
-
 export default AppWarning;

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -20,14 +20,21 @@ import BaseDialog from "..//dialogs/BaseDialog";
 import DialogButtons from "./DialogButtons";
 import classNames from 'classnames';
 import AccessibleButton from './AccessibleButton';
-import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';
 
-export interface DesktopCapturerSource {
-    id: string;
-    name: string;
-    thumbnailURL;
+export function getDesktopCapturerSources(): Promise<Array<DesktopCapturerSource>> {
+    const options: GetSourcesOptions = {
+        thumbnailSize: {
+            height: 176,
+            width: 312,
+        },
+        types: [
+            "screen",
+            "window",
+        ],
+    };
+    return window.electron.getDesktopCapturerSources(options);
 }
 
 export enum Tabs {
@@ -78,7 +85,7 @@ export interface PickerIState {
     selectedSource: DesktopCapturerSource | null;
 }
 export interface PickerIProps {
-    onFinished(source: DesktopCapturerSource): void;
+    onFinished(sourceId: string): void;
 }
 
 @replaceableComponent("views.elements.DesktopCapturerSourcePicker")
@@ -123,7 +130,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
     };
 
     private onShare = (): void => {
-        this.props.onFinished(this.state.selectedSource);
+        this.props.onFinished(this.state.selectedSource.id);
     };
 
     private onTabChange = (): void => {

src/components/views/elements/DialogButtons.tsx

@@ -17,60 +17,61 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from "prop-types";
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // The primary button which is styled differently and has default focus.
+    primaryButton: React.ReactNode;
+
+    // A node to insert into the cancel button instead of default "Cancel"
+    cancelButton?: React.ReactNode;
+
+    // If true, make the primary button a form submit button (input type="submit")
+    primaryIsSubmit?: boolean;
+
+    // onClick handler for the primary button.
+    onPrimaryButtonClick?: (ev: React.MouseEvent) => void;
+
+    // should there be a cancel button? default: true
+    hasCancel?: boolean;
+
+    // The class of the cancel button, only used if a cancel button is
+    // enabled
+    cancelButtonClass?: string;
+
+    // onClick handler for the cancel button.
+    onCancel?: (...args: any[]) => void;
+
+    focus?: boolean;
+
+    // disables the primary and cancel buttons
+    disabled?: boolean;
+
+    // disables only the primary button
+    primaryDisabled?: boolean;
+
+    // something to stick next to the buttons, optionally
+    additive?: React.ReactNode;
+
+    primaryButtonClass?: string;
+}
+
 /**
  * Basic container for buttons in modal dialogs.
  */
 @replaceableComponent("views.elements.DialogButtons")
-export default class DialogButtons extends React.Component {
-    static propTypes = {
-        // The primary button which is styled differently and has default focus.
-        primaryButton: PropTypes.node.isRequired,
-
-        // A node to insert into the cancel button instead of default "Cancel"
-        cancelButton: PropTypes.node,
-
-        // If true, make the primary button a form submit button (input type="submit")
-        primaryIsSubmit: PropTypes.bool,
-
-        // onClick handler for the primary button.
-        onPrimaryButtonClick: PropTypes.func,
-
-        // should there be a cancel button? default: true
-        hasCancel: PropTypes.bool,
-
-        // The class of the cancel button, only used if a cancel button is
-        // enabled
-        cancelButtonClass: PropTypes.node,
-
-        // onClick handler for the cancel button.
-        onCancel: PropTypes.func,
-
-        focus: PropTypes.bool,
-
-        // disables the primary and cancel buttons
-        disabled: PropTypes.bool,
-
-        // disables only the primary button
-        primaryDisabled: PropTypes.bool,
-
-        // something to stick next to the buttons, optionally
-        additive: PropTypes.element,
-    };
-
-    static defaultProps = {
+export default class DialogButtons extends React.Component<IProps> {
+    public static defaultProps: Partial<IProps> = {
         hasCancel: true,
         disabled: false,
     };
 
-    _onCancelClick = () => {
-        this.props.onCancel();
+    private onCancelClick = (event: React.MouseEvent): void => {
+        this.props.onCancel(event);
     };
 
-    render() {
+    public render(): JSX.Element {
         let primaryButtonClassName = "mx_Dialog_primary";
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
@@ -82,7 +83,7 @@ export default class DialogButtons extends React.Component {
                 // important: the default type is 'submit' and this button comes before the
                 // primary in the DOM so will get form submissions unless we make it not a submit.
                 type="button"
-                onClick={this._onCancelClick}
+                onClick={this.onCancelClick}
                 className={this.props.cancelButtonClass}
                 disabled={this.props.disabled}
             >

src/components/views/elements/DirectorySearchBox.tsx

@@ -14,71 +14,73 @@ 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 React, { ChangeEvent, createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from "./AccessibleButton";
+
+interface IProps {
+    className?: string;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+    onJoinClick?: (value: string) => void;
+    placeholder?: string;
+    showJoinButton?: boolean;
+    initialText?: string;
+}
+
+interface IState {
+    value: string;
+}
 
 @replaceableComponent("views.elements.DirectorySearchBox")
-export default class DirectorySearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this._collectInput = this._collectInput.bind(this);
-        this._onClearClick = this._onClearClick.bind(this);
-        this._onChange = this._onChange.bind(this);
-        this._onKeyUp = this._onKeyUp.bind(this);
-        this._onJoinButtonClick = this._onJoinButtonClick.bind(this);
+export default class DirectorySearchBox extends React.Component<IProps, IState> {
+    private input = createRef<HTMLInputElement>();
 
-        this.input = null;
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             value: this.props.initialText || '',
         };
     }
 
-    _collectInput(e) {
-        this.input = e;
-    }
-
-    _onClearClick() {
+    private onClearClick = (): void => {
         this.setState({ value: '' });
 
-        if (this.input) {
-            this.input.focus();
+        if (this.input.current) {
+            this.input.current.focus();
 
             if (this.props.onClear) {
                 this.props.onClear();
             }
         }
-    }
+    };
 
-    _onChange(ev) {
-        if (!this.input) return;
+    private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
+        if (!this.input.current) return;
         this.setState({ value: ev.target.value });
 
         if (this.props.onChange) {
             this.props.onChange(ev.target.value);
         }
-    }
+    };
 
-    _onKeyUp(ev) {
+    private onKeyUp = (ev: React.KeyboardEvent): void => {
         if (ev.key == 'Enter' && this.props.showJoinButton) {
             if (this.props.onJoinClick) {
                 this.props.onJoinClick(this.state.value);
             }
         }
-    }
+    };
 
-    _onJoinButtonClick() {
+    private onJoinButtonClick = (): void => {
         if (this.props.onJoinClick) {
             this.props.onJoinClick(this.state.value);
         }
-    }
-
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+    };
 
+    public render(): JSX.Element {
         const searchboxClasses = {
             mx_DirectorySearchBox: true,
         };
@@ -87,7 +89,7 @@ export default class DirectorySearchBox extends React.Component {
         let joinButton;
         if (this.props.showJoinButton) {
             joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
-                onClick={this._onJoinButtonClick}
+                onClick={this.onJoinButtonClick}
             >{ _t("Join") }</AccessibleButton>;
         }
 
@@ -97,24 +99,15 @@ export default class DirectorySearchBox extends React.Component {
                 name="dirsearch"
                 value={this.state.value}
                 className="mx_textinput_icon mx_textinput_search"
-                ref={this._collectInput}
-                onChange={this._onChange}
-                onKeyUp={this._onKeyUp}
+                ref={this.input}
+                onChange={this.onChange}
+                onKeyUp={this.onKeyUp}
                 placeholder={this.props.placeholder}
                 autoFocus
             />
             { joinButton }
-            <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
+            <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this.onClearClick} />
         </div>;
     }
 }
 
-DirectorySearchBox.propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    onJoinClick: PropTypes.func,
-    placeholder: PropTypes.string,
-    showJoinButton: PropTypes.bool,
-    initialText: PropTypes.string,
-};

src/components/views/elements/EditableText.tsx

@@ -16,33 +16,42 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+enum Phases {
+    Display = "display",
+    Edit = "edit",
+}
+
+interface IProps {
+    onValueChanged?: (value: string, shouldSubmit: boolean) => void;
+    initialValue?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+    placeholderClassName?: string;
+    // Overrides blurToSubmit if true
+    blurToCancel?: boolean;
+    // Will cause onValueChanged(value, true) to fire on blur
+    blurToSubmit?: boolean;
+    editable?: boolean;
+}
+
+interface IState {
+    phase: Phases;
+}
+
 @replaceableComponent("views.elements.EditableText")
-export default class EditableText extends React.Component {
-    static propTypes = {
-        onValueChanged: PropTypes.func,
-        initialValue: PropTypes.string,
-        label: PropTypes.string,
-        placeholder: PropTypes.string,
-        className: PropTypes.string,
-        labelClassName: PropTypes.string,
-        placeholderClassName: PropTypes.string,
-        // Overrides blurToSubmit if true
-        blurToCancel: PropTypes.bool,
-        // Will cause onValueChanged(value, true) to fire on blur
-        blurToSubmit: PropTypes.bool,
-        editable: PropTypes.bool,
-    };
+export default class EditableText extends React.Component<IProps, IState> {
+    // we track value as an JS object field rather than in React state
+    // as React doesn't play nice with contentEditable.
+    public value = '';
+    private placeholder = false;
+    private editableDiv = createRef<HTMLDivElement>();
 
-    static Phases = {
-        Display: "display",
-        Edit: "edit",
-    };
-
-    static defaultProps = {
+    public static defaultProps: Partial<IProps> = {
         onValueChanged() {},
         initialValue: '',
         label: '',
@@ -53,81 +62,61 @@ export default class EditableText extends React.Component {
         blurToSubmit: false,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        // we track value as an JS object field rather than in React state
-        // as React doesn't play nice with contentEditable.
-        this.value = '';
-        this.placeholder = false;
-
-        this._editable_div = createRef();
+        this.state = {
+            phase: Phases.Display,
+        };
     }
 
-    state = {
-        phase: EditableText.Phases.Display,
-    };
-
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
+    public UNSAFE_componentWillReceiveProps(nextProps: IProps): void {
         if (nextProps.initialValue !== this.props.initialValue) {
             this.value = nextProps.initialValue;
-            if (this._editable_div.current) {
+            if (this.editableDiv.current) {
                 this.showPlaceholder(!this.value);
             }
         }
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         this.value = this.props.initialValue;
-        if (this._editable_div.current) {
+        if (this.editableDiv.current) {
             this.showPlaceholder(!this.value);
         }
     }
 
-    showPlaceholder = show => {
+    private showPlaceholder = (show: boolean): void => {
         if (show) {
-            this._editable_div.current.textContent = this.props.placeholder;
-            this._editable_div.current.setAttribute("class", this.props.className
+            this.editableDiv.current.textContent = this.props.placeholder;
+            this.editableDiv.current.setAttribute("class", this.props.className
                 + " " + this.props.placeholderClassName);
             this.placeholder = true;
             this.value = '';
         } else {
-            this._editable_div.current.textContent = this.value;
-            this._editable_div.current.setAttribute("class", this.props.className);
+            this.editableDiv.current.textContent = this.value;
+            this.editableDiv.current.setAttribute("class", this.props.className);
             this.placeholder = false;
         }
     };
 
-    getValue = () => this.value;
-
-    setValue = value => {
-        this.value = value;
-        this.showPlaceholder(!this.value);
-    };
-
-    edit = () => {
+    private cancelEdit = (): void => {
         this.setState({
-            phase: EditableText.Phases.Edit,
-        });
-    };
-
-    cancelEdit = () => {
-        this.setState({
-            phase: EditableText.Phases.Display,
+            phase: Phases.Display,
         });
         this.value = this.props.initialValue;
         this.showPlaceholder(!this.value);
         this.onValueChanged(false);
-        this._editable_div.current.blur();
+        this.editableDiv.current.blur();
     };
 
-    onValueChanged = shouldSubmit => {
+    private onValueChanged = (shouldSubmit: boolean): void => {
         this.props.onValueChanged(this.value, shouldSubmit);
     };
 
-    onKeyDown = ev => {
+    private onKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
         // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
 
         if (this.placeholder) {
@@ -142,13 +131,13 @@ export default class EditableText extends React.Component {
         // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
     };
 
-    onKeyUp = ev => {
+    private onKeyUp = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
         // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
 
-        if (!ev.target.textContent) {
+        if (!(ev.target as HTMLDivElement).textContent) {
             this.showPlaceholder(true);
         } else if (!this.placeholder) {
-            this.value = ev.target.textContent;
+            this.value = (ev.target as HTMLDivElement).textContent;
         }
 
         if (ev.key === Key.ENTER) {
@@ -160,22 +149,22 @@ export default class EditableText extends React.Component {
         // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
     };
 
-    onClickDiv = ev => {
+    private onClickDiv = (): void => {
         if (!this.props.editable) return;
 
         this.setState({
-            phase: EditableText.Phases.Edit,
+            phase: Phases.Edit,
         });
     };
 
-    onFocus = ev => {
+    private onFocus = (ev: React.FocusEvent<HTMLDivElement>): void => {
         //ev.target.setSelectionRange(0, ev.target.textContent.length);
 
         const node = ev.target.childNodes[0];
         if (node) {
             const range = document.createRange();
             range.setStart(node, 0);
-            range.setEnd(node, node.length);
+            range.setEnd(node, ev.target.childNodes.length);
 
             const sel = window.getSelection();
             sel.removeAllRanges();
@@ -183,11 +172,15 @@ export default class EditableText extends React.Component {
         }
     };
 
-    onFinish = (ev, shouldSubmit) => {
+    private onFinish = (
+        ev: React.KeyboardEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>,
+        shouldSubmit?: boolean,
+    ): void => {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
-        const submit = (ev.key === Key.ENTER) || shouldSubmit;
+        const submit = ("key" in ev && ev.key === Key.ENTER) || shouldSubmit;
         this.setState({
-            phase: EditableText.Phases.Display,
+            phase: Phases.Display,
         }, () => {
             if (this.value !== this.props.initialValue) {
                 self.onValueChanged(submit);
@@ -195,7 +188,7 @@ export default class EditableText extends React.Component {
         });
     };
 
-    onBlur = ev => {
+    private onBlur = (ev: React.FocusEvent<HTMLDivElement>): void => {
         const sel = window.getSelection();
         sel.removeAllRanges();
 
@@ -208,11 +201,11 @@ export default class EditableText extends React.Component {
         this.showPlaceholder(!this.value);
     };
 
-    render() {
+    public render(): JSX.Element {
         const { className, editable, initialValue, label, labelClassName } = this.props;
         let editableEl;
 
-        if (!editable || (this.state.phase === EditableText.Phases.Display &&
+        if (!editable || (this.state.phase === Phases.Display &&
             (label || labelClassName) && !this.value)
         ) {
             // show the label
@@ -222,7 +215,7 @@ export default class EditableText extends React.Component {
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
             editableEl = <div
-                ref={this._editable_div}
+                ref={this.editableDiv}
                 contentEditable={true}
                 className={className}
                 onKeyDown={this.onKeyDown}

src/components/views/elements/EditableTextContainer.tsx

@@ -15,9 +15,34 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from "./Spinner";
+import EditableText from "./EditableText";
+
+interface IProps {
+    /* callback to retrieve the initial value. */
+    getInitialValue?: () => Promise<string>;
+
+    /* initial value; used if getInitialValue is not given */
+    initialValue?: string;
+
+    /* placeholder text to use when the value is empty (and not being
+     * edited) */
+    placeholder?: string;
+
+    /* callback to update the value. Called with a single argument: the new
+     * value. */
+    onSubmit?: (value: string) => Promise<{} | void>;
+
+    /* should the input submit when focus is lost? */
+    blurToSubmit?: boolean;
+}
+
+interface IState {
+    busy: boolean;
+    errorString: string;
+    value: string;
+}
 
 /**
  * A component which wraps an EditableText, with a spinner while updates take
@@ -31,50 +56,51 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * taken from the 'initialValue' property.
  */
 @replaceableComponent("views.elements.EditableTextContainer")
-export default class EditableTextContainer extends React.Component {
-    constructor(props) {
+export default class EditableTextContainer extends React.Component<IProps, IState> {
+    private unmounted = false;
+    public static defaultProps: Partial<IProps> = {
+        initialValue: "",
+        placeholder: "",
+        blurToSubmit: false,
+        onSubmit: () => { return Promise.resolve(); },
+    };
+
+    constructor(props: IProps) {
         super(props);
 
-        this._unmounted = false;
         this.state = {
             busy: false,
             errorString: null,
             value: props.initialValue,
         };
-        this._onValueChanged = this._onValueChanged.bind(this);
     }
 
-    componentDidMount() {
-        if (this.props.getInitialValue === undefined) {
-            // use whatever was given in the initialValue property.
-            return;
-        }
+    public async componentDidMount(): Promise<void> {
+        // use whatever was given in the initialValue property.
+        if (this.props.getInitialValue === undefined) return;
 
         this.setState({ busy: true });
-
-        this.props.getInitialValue().then(
-            (result) => {
-                if (this._unmounted) { return; }
-                this.setState({
-                    busy: false,
-                    value: result,
-                });
-            },
-            (error) => {
-                if (this._unmounted) { return; }
-                this.setState({
-                    errorString: error.toString(),
-                    busy: false,
-                });
-            },
-        );
+        try {
+            const initialValue = await this.props.getInitialValue();
+            if (this.unmounted) return;
+            this.setState({
+                busy: false,
+                value: initialValue,
+            });
+        } catch (error) {
+            if (this.unmounted) return;
+            this.setState({
+                errorString: error.toString(),
+                busy: false,
+            });
+        }
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
+    public componentWillUnmount(): void {
+        this.unmounted = true;
     }
 
-    _onValueChanged(value, shouldSubmit) {
+    private onValueChanged = (value: string, shouldSubmit: boolean): void => {
         if (!shouldSubmit) {
             return;
         }
@@ -86,38 +112,36 @@ export default class EditableTextContainer extends React.Component {
 
         this.props.onSubmit(value).then(
             () => {
-                if (this._unmounted) { return; }
+                if (this.unmounted) { return; }
                 this.setState({
                     busy: false,
                     value: value,
                 });
             },
             (error) => {
-                if (this._unmounted) { return; }
+                if (this.unmounted) { return; }
                 this.setState({
                     errorString: error.toString(),
                     busy: false,
                 });
             },
         );
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         if (this.state.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
             return (
-                <Loader />
+                <Spinner />
             );
         } else if (this.state.errorString) {
             return (
                 <div className="error">{ this.state.errorString }</div>
             );
         } else {
-            const EditableText = sdk.getComponent('elements.EditableText');
             return (
                 <EditableText initialValue={this.state.value}
                     placeholder={this.props.placeholder}
-                    onValueChanged={this._onValueChanged}
+                    onValueChanged={this.onValueChanged}
                     blurToSubmit={this.props.blurToSubmit}
                 />
             );
@@ -125,28 +149,3 @@ export default class EditableTextContainer extends React.Component {
     }
 }
 
-EditableTextContainer.propTypes = {
-    /* callback to retrieve the initial value. */
-    getInitialValue: PropTypes.func,
-
-    /* initial value; used if getInitialValue is not given */
-    initialValue: PropTypes.string,
-
-    /* placeholder text to use when the value is empty (and not being
-     * edited) */
-    placeholder: PropTypes.string,
-
-    /* callback to update the value. Called with a single argument: the new
-     * value. */
-    onSubmit: PropTypes.func,
-
-    /* should the input submit when focus is lost? */
-    blurToSubmit: PropTypes.bool,
-};
-
-EditableTextContainer.defaultProps = {
-    initialValue: "",
-    placeholder: "",
-    blurToSubmit: false,
-    onSubmit: function(v) {return Promise.resolve(); },
-};

src/components/views/elements/ErrorBoundary.tsx

@@ -77,7 +77,7 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
 
     render() {
         if (this.state.error) {
-            const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
+            const newIssueUrl = "https://github.com/vector-im/element-web/issues/new/choose";
 
             let bugReportSection;
             if (SdkConfig.get().bug_report_endpoint_url) {

src/components/views/elements/EventTilePreview.tsx

@@ -25,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
 import { UIFeature } from "../../../settings/UIFeature";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from './Spinner';
 
 interface IProps {
     /**
@@ -45,7 +46,7 @@ interface IProps {
     /**
      * The ID of the displayed user
      */
-    userId: string;
+    userId?: string;
 
     /**
      * The display name of the displayed user
@@ -118,13 +119,16 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const event = this.fakeEvent(this.state);
-
         const className = classnames(this.props.className, {
             "mx_IRCLayout": this.props.layout == Layout.IRC,
             "mx_GroupLayout": this.props.layout == Layout.Group,
+            "mx_EventTilePreview_loader": !this.props.userId,
         });
 
+        if (!this.props.userId) return <div className={className}><Spinner /></div>;
+
+        const event = this.fakeEvent(this.state);
+
         return <div className={className}>
             <EventTile
                 mxEvent={event}

src/components/views/elements/ImageView.tsx

@@ -34,6 +34,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
 import { IDialogProps } from '../dialogs/IDialogProps';
+import UIStore from '../../../stores/UIStore';
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -44,6 +45,13 @@ const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
+// Height of mx_ImageView_panel
+const getPanelHeight = (): number => {
+    const value = getComputedStyle(document.documentElement).getPropertyValue("--image-view-panel-height");
+    // Return the value as a number without the unit
+    return parseInt(value.slice(0, value.length - 2));
+};
+
 interface IProps extends IDialogProps {
     src: string; // the source of the image being displayed
     name?: string; // the main title ('name') for the image
@@ -56,8 +64,15 @@ interface IProps extends IDialogProps {
     // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
     // properties above, which let us use lightboxes to display images which aren't associated
     // with events.
-    mxEvent: MatrixEvent;
-    permalinkCreator: RoomPermalinkCreator;
+    mxEvent?: MatrixEvent;
+    permalinkCreator?: RoomPermalinkCreator;
+
+    thumbnailInfo?: {
+        positionX: number;
+        positionY: number;
+        width: number;
+        height: number;
+    };
 }
 
 interface IState {
@@ -75,13 +90,25 @@ interface IState {
 export default class ImageView extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
+
+        const { thumbnailInfo } = this.props;
+
         this.state = {
-            zoom: 0,
+            zoom: 0, // We default to 0 and override this in imageLoaded once we have naturalSize
             minZoom: MAX_SCALE,
             maxZoom: MAX_SCALE,
             rotation: 0,
-            translationX: 0,
-            translationY: 0,
+            translationX: (
+                thumbnailInfo?.positionX +
+                (thumbnailInfo?.width / 2) -
+                (UIStore.instance.windowWidth / 2)
+            ) ?? 0,
+            translationY: (
+                thumbnailInfo?.positionY +
+                (thumbnailInfo?.height / 2) -
+                (UIStore.instance.windowHeight / 2) -
+                (getPanelHeight() / 2)
+            ) ?? 0,
             moving: false,
             contextMenuDisplayed: false,
         };
@@ -98,6 +125,9 @@ export default class ImageView extends React.Component<IProps, IState> {
     private previousX = 0;
     private previousY = 0;
 
+    private animatingLoading = false;
+    private imageIsLoaded = false;
+
     componentDidMount() {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
@@ -105,15 +135,37 @@ export default class ImageView extends React.Component<IProps, IState> {
         // We want to recalculate zoom whenever the window's size changes
         window.addEventListener("resize", this.recalculateZoom);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.recalculateZoom);
+        this.image.current.addEventListener("load", this.imageLoaded);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
         window.removeEventListener("resize", this.recalculateZoom);
-        this.image.current.removeEventListener("load", this.recalculateZoom);
+        this.image.current.removeEventListener("load", this.imageLoaded);
     }
 
+    private imageLoaded = () => {
+        // First, we calculate the zoom, so that the image has the same size as
+        // the thumbnail
+        const { thumbnailInfo } = this.props;
+        if (thumbnailInfo?.width) {
+            this.setState({ zoom: thumbnailInfo.width / this.image.current.naturalWidth });
+        }
+
+        // Once the zoom is set, we the image is considered loaded and we can
+        // start animating it into the center of the screen
+        this.imageIsLoaded = true;
+        this.animatingLoading = true;
+        this.setZoomAndRotation();
+        this.setState({
+            translationX: 0,
+            translationY: 0,
+        });
+
+        // Once the position is set, there is no need to animate anymore
+        this.animatingLoading = false;
+    };
+
     private recalculateZoom = () => {
         this.setZoomAndRotation();
     };
@@ -360,16 +412,17 @@ export default class ImageView extends React.Component<IProps, IState> {
         const showEventMeta = !!this.props.mxEvent;
         const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
 
+        let transitionClassName;
+        if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
+        else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
+        else transitionClassName = "mx_ImageView_image_animating";
+
         let cursor;
-        if (this.state.moving) {
-            cursor= "grabbing";
-        } else if (zoomingDisabled) {
-            cursor = "default";
-        } else if (this.state.zoom === this.state.minZoom) {
-            cursor = "zoom-in";
-        } else {
-            cursor = "zoom-out";
-        }
+        if (this.state.moving) cursor = "grabbing";
+        else if (zoomingDisabled) cursor = "default";
+        else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
+        else cursor = "zoom-out";
+
         const rotationDegrees = this.state.rotation + "deg";
         const zoom = this.state.zoom;
         const translatePixelsX = this.state.translationX + "px";
@@ -380,7 +433,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         // image causing it translate in the wrong direction.
         const style = {
             cursor: cursor,
-            transition: this.state.moving ? null : "transform 200ms ease 0s",
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoom})
@@ -419,6 +471,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             const avatar = (
                 <MemberAvatar
                     member={mxEvent.sender}
+                    fallbackUserId={mxEvent.getSender()}
                     width={32}
                     height={32}
                     viewUserOnClick={true}
@@ -527,7 +580,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                         style={style}
                         alt={this.props.name}
                         ref={this.image}
-                        className="mx_ImageView_image"
+                        className={`mx_ImageView_image ${transitionClassName}`}
                         draggable={true}
                         onMouseDown={this.onStartMoving}
                     />

src/components/views/elements/InviteReason.tsx

@@ -16,11 +16,13 @@ limitations under the License.
 
 import classNames from "classnames";
 import React from "react";
+import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     reason: string;
+    htmlReason?: string;
 }
 
 interface IState {
@@ -51,7 +53,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
 
         return <div className={classes}>
-            <div className="mx_InviteReason_reason">{ this.props.reason }</div>
+            <div className="mx_InviteReason_reason">{ this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason }</div>
             <div className="mx_InviteReason_view"
                 onClick={this.onViewClick}
             >

src/components/views/elements/LanguageDropdown.tsx

@@ -16,13 +16,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from "./Spinner";
+import Dropdown from "./Dropdown";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
@@ -30,11 +30,22 @@ function languageMatchesSearchQuery(query, language) {
     return false;
 }
 
+interface IProps {
+    className?: string;
+    onOptionChange: (language: string) => void;
+    value?: string;
+    disabled?: boolean;
+}
+
+interface IState {
+    searchQuery: string;
+    langs: string[];
+}
+
 @replaceableComponent("views.elements.LanguageDropdown")
-export default class LanguageDropdown extends React.Component {
-    constructor(props) {
+export default class LanguageDropdown extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
-        this._onSearchChange = this._onSearchChange.bind(this);
 
         this.state = {
             searchQuery: '',
@@ -42,7 +53,7 @@ export default class LanguageDropdown extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
             langs.sort(function(a, b) {
                 if (a.label < b.label) return -1;
@@ -63,20 +74,17 @@ export default class LanguageDropdown extends React.Component {
         }
     }
 
-    _onSearchChange(search) {
+    private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
         });
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         if (this.state.langs === null) {
-            const Spinner = sdk.getComponent('elements.Spinner');
             return <Spinner />;
         }
 
-        const Dropdown = sdk.getComponent('elements.Dropdown');
-
         let displayedLanguages;
         if (this.state.searchQuery) {
             displayedLanguages = this.state.langs.filter((lang) => {
@@ -107,7 +115,7 @@ export default class LanguageDropdown extends React.Component {
             id="mx_LanguageDropdown"
             className={this.props.className}
             onOptionChange={this.props.onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onSearchChange={this.onSearchChange}
             searchEnabled={true}
             value={value}
             label={_t("Language Dropdown")}
@@ -118,8 +126,3 @@ export default class LanguageDropdown extends React.Component {
     }
 }
 
-LanguageDropdown.propTypes = {
-    className: PropTypes.string,
-    onOptionChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-};

src/components/views/elements/LazyRenderList.tsx

@@ -15,17 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from 'prop-types';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 class ItemRange {
-    constructor(topCount, renderCount, bottomCount) {
-        this.topCount = topCount;
-        this.renderCount = renderCount;
-        this.bottomCount = bottomCount;
-    }
+    constructor(
+        public topCount: number,
+        public renderCount: number,
+        public bottomCount: number,
+    ) { }
 
-    contains(range) {
+    public contains(range: ItemRange): boolean {
         // don't contain empty ranges
         // as it will prevent clearing the list
         // once it is scrolled far enough out of view
@@ -36,7 +35,7 @@ class ItemRange {
             (range.topCount + range.renderCount) <= (this.topCount + this.renderCount);
     }
 
-    expand(amount) {
+    public expand(amount: number): ItemRange {
         // don't expand ranges that won't render anything
         if (this.renderCount === 0) {
             return this;
@@ -51,20 +50,55 @@ class ItemRange {
         );
     }
 
-    totalSize() {
+    public totalSize(): number {
         return this.topCount + this.renderCount + this.bottomCount;
     }
 }
 
+interface IProps<T> {
+    // height in pixels of the component returned by `renderItem`
+    itemHeight: number;
+    // function to turn an element of `items` into a react component
+    renderItem: (item: T) => JSX.Element;
+    // scrollTop of the viewport (minus the height of any content above this list like other `LazyRenderList`s)
+    scrollTop: number;
+    // the height of the viewport this content is scrolled in
+    height: number;
+    // all items for the list. These should not be react components, see `renderItem`.
+    items?: T[];
+    // the amount of items to scroll before causing a rerender,
+    // should typically be less than `overflowItems` unless applying
+    // margins in the parent component when using multiple LazyRenderList in one viewport.
+    // use 0 to only rerender when items will come into view.
+    overflowMargin?: number;
+    // the amount of items to add at the top and bottom to render,
+    // so not every scroll of causes a rerender.
+    overflowItems?: number;
+
+    element?: string;
+    className?: string;
+}
+
+interface IState {
+    renderRange: ItemRange;
+}
+
 @replaceableComponent("views.elements.LazyRenderList")
-export default class LazyRenderList extends React.Component {
-    constructor(props) {
+export default class LazyRenderList<T = any> extends React.Component<IProps<T>, IState> {
+    public static defaultProps: Partial<IProps<unknown>> = {
+        overflowItems: 20,
+        overflowMargin: 5,
+    };
+
+    constructor(props: IProps<T>) {
         super(props);
 
-        this.state = {};
+        this.state = {
+            renderRange: null,
+        };
     }
 
-    static getDerivedStateFromProps(props, state) {
+    public static getDerivedStateFromProps(props: IProps<unknown>, state: IState): Partial<IState> {
         const range = LazyRenderList.getVisibleRangeFromProps(props);
         const intersectRange = range.expand(props.overflowMargin);
         const renderRange = range.expand(props.overflowItems);
@@ -77,7 +111,7 @@ export default class LazyRenderList extends React.Component {
         return null;
     }
 
-    static getVisibleRangeFromProps(props) {
+    private static getVisibleRangeFromProps(props: IProps<unknown>): ItemRange {
         const { items, itemHeight, scrollTop, height } = props;
         const length = items ? items.length : 0;
         const topCount = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), length);
@@ -88,7 +122,7 @@ export default class LazyRenderList extends React.Component {
         return new ItemRange(topCount, renderCount, bottomCount);
     }
 
-    render() {
+    public render(): JSX.Element {
         const { itemHeight, items, renderItem } = this.props;
         const { renderRange } = this.state;
         const { topCount, renderCount, bottomCount } = renderRange;
@@ -109,28 +143,3 @@ export default class LazyRenderList extends React.Component {
     }
 }
 
-LazyRenderList.defaultProps = {
-    overflowItems: 20,
-    overflowMargin: 5,
-};
-
-LazyRenderList.propTypes = {
-    // height in pixels of the component returned by `renderItem`
-    itemHeight: PropTypes.number.isRequired,
-    // function to turn an element of `items` into a react component
-    renderItem: PropTypes.func.isRequired,
-    // scrollTop of the viewport (minus the height of any content above this list like other `LazyRenderList`s)
-    scrollTop: PropTypes.number.isRequired,
-    // the height of the viewport this content is scrolled in
-    height: PropTypes.number.isRequired,
-    // all items for the list. These should not be react components, see `renderItem`.
-    items: PropTypes.array,
-    // the amount of items to scroll before causing a rerender,
-    // should typically be less than `overflowItems` unless applying
-    // margins in the parent component when using multiple LazyRenderList in one viewport.
-    // use 0 to only rerender when items will come into view.
-    overflowMargin: PropTypes.number,
-    // the amount of items to add at the top and bottom to render,
-    // so not every scroll of causes a rerender.
-    overflowItems: PropTypes.number,
-};

src/components/views/elements/MemberEventListSummary.tsx

@@ -135,7 +135,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
 
             const desc = formatCommaSeparatedList(descs);
 
-            return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
+            return _t('%(nameList)s %(transitionList)s', { nameList, transitionList: desc });
         });
 
         if (!summaries) {

src/components/views/elements/PersistedElement.tsx

@@ -16,25 +16,26 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import { throttle } from "lodash";
-import ResizeObserver from 'resize-observer-polyfill';
 
 import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ActionPayload } from "../../../dispatcher/payloads";
+
+export const getPersistKey = (appId: string) => 'widget_' + appId;
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
-function getContainer(containerId) {
-    return document.getElementById(containerId);
+function getContainer(containerId: string): HTMLDivElement {
+    return document.getElementById(containerId) as HTMLDivElement;
 }
 
-function getOrCreateContainer(containerId) {
+function getOrCreateContainer(containerId: string): HTMLDivElement {
     let container = getContainer(containerId);
 
     if (!container) {
@@ -46,7 +47,19 @@ function getOrCreateContainer(containerId) {
     return container;
 }
 
-/*
+interface IProps {
+    // Unique identifier for this PersistedElement instance
+    // Any PersistedElements with the same persistKey will use
+    // the same DOM container.
+    persistKey: string;
+
+    // z-index for the element. Defaults to 9.
+    zIndex?: number;
+
+    style?: React.StyleHTMLAttributes<HTMLDivElement>;
+}
+
+/**
  * Class of component that renders its children in a separate ReactDOM virtual tree
  * in a container element appended to document.body.
  *
@@ -58,42 +71,33 @@ function getOrCreateContainer(containerId) {
  * bounding rect as the parent of PE.
  */
 @replaceableComponent("views.elements.PersistedElement")
-export default class PersistedElement extends React.Component {
-    static propTypes = {
-        // Unique identifier for this PersistedElement instance
-        // Any PersistedElements with the same persistKey will use
-        // the same DOM container.
-        persistKey: PropTypes.string.isRequired,
+export default class PersistedElement extends React.Component<IProps> {
+    private resizeObserver: ResizeObserver;
+    private dispatcherRef: string;
+    private childContainer: HTMLDivElement;
+    private child: HTMLDivElement;
 
-        // z-index for the element. Defaults to 9.
-        zIndex: PropTypes.number,
-    };
+    constructor(props: IProps) {
+        super(props);
 
-    constructor() {
-        super();
-        this.collectChildContainer = this.collectChildContainer.bind(this);
-        this.collectChild = this.collectChild.bind(this);
-        this._repositionChild = this._repositionChild.bind(this);
-        this._onAction = this._onAction.bind(this);
-
-        this.resizeObserver = new ResizeObserver(this._repositionChild);
+        this.resizeObserver = new ResizeObserver(this.repositionChild);
         // Annoyingly, a resize observer is insufficient, since we also care
         // about when the element moves on the screen without changing its
         // dimensions. Doesn't look like there's a ResizeObserver equivalent
         // for this, so we bodge it by listening for document resize and
         // the timeline_resize action.
-        window.addEventListener('resize', this._repositionChild);
-        this._dispatcherRef = dis.register(this._onAction);
+        window.addEventListener('resize', this.repositionChild);
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     /**
      * Removes the DOM elements created when a PersistedElement with the given
      * persistKey was mounted. The DOM elements will be re-added if another
-     * PeristedElement is mounted in the future.
+     * PersistedElement is mounted in the future.
      *
      * @param {string} persistKey Key used to uniquely identify this PersistedElement
      */
-    static destroyElement(persistKey) {
+    public static destroyElement(persistKey: string): void {
         const container = getContainer('mx_persistedElement_' + persistKey);
         if (container) {
             container.remove();
@@ -104,7 +108,7 @@ export default class PersistedElement extends React.Component {
         return Boolean(getContainer('mx_persistedElement_' + persistKey));
     }
 
-    collectChildContainer(ref) {
+    private collectChildContainer = (ref: HTMLDivElement): void => {
         if (this.childContainer) {
             this.resizeObserver.unobserve(this.childContainer);
         }
@@ -112,48 +116,48 @@ export default class PersistedElement extends React.Component {
         if (ref) {
             this.resizeObserver.observe(ref);
         }
-    }
+    };
 
-    collectChild(ref) {
+    private collectChild = (ref: HTMLDivElement): void => {
         this.child = ref;
         this.updateChild();
-    }
+    };
 
-    componentDidMount() {
+    public componentDidMount(): void {
         this.updateChild();
         this.renderApp();
     }
 
-    componentDidUpdate() {
+    public componentDidUpdate(): void {
         this.updateChild();
         this.renderApp();
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.updateChildVisibility(this.child, false);
         this.resizeObserver.disconnect();
-        window.removeEventListener('resize', this._repositionChild);
-        dis.unregister(this._dispatcherRef);
+        window.removeEventListener('resize', this.repositionChild);
+        dis.unregister(this.dispatcherRef);
     }
 
-    _onAction(payload) {
+    private onAction = (payload: ActionPayload): void => {
         if (payload.action === 'timeline_resize') {
-            this._repositionChild();
+            this.repositionChild();
         } else if (payload.action === 'logout') {
             PersistedElement.destroyElement(this.props.persistKey);
         }
-    }
+    };
 
-    _repositionChild() {
+    private repositionChild = (): void => {
         this.updateChildPosition(this.child, this.childContainer);
-    }
+    };
 
-    updateChild() {
+    private updateChild(): void {
         this.updateChildPosition(this.child, this.childContainer);
         this.updateChildVisibility(this.child, true);
     }
 
-    renderApp() {
+    private renderApp(): void {
         const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
             <div ref={this.collectChild} style={this.props.style}>
                 { this.props.children }
@@ -163,12 +167,12 @@ export default class PersistedElement extends React.Component {
         ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
     }
 
-    updateChildVisibility(child, visible) {
+    private updateChildVisibility(child: HTMLDivElement, visible: boolean): void {
         if (!child) return;
         child.style.display = visible ? 'block' : 'none';
     }
 
-    updateChildPosition = throttle((child, parent) => {
+    private updateChildPosition = throttle((child: HTMLDivElement, parent: HTMLDivElement): void => {
         if (!child || !parent) return;
 
         const parentRect = parent.getBoundingClientRect();
@@ -182,9 +186,8 @@ export default class PersistedElement extends React.Component {
         });
     }, 100, { trailing: true, leading: true });
 
-    render() {
+    public render(): JSX.Element {
         return <div ref={this.collectChildContainer} />;
     }
 }
 
-export const getPersistKey = (appId) => 'widget_' + appId;

src/components/views/elements/PersistentApp.tsx

@@ -19,57 +19,70 @@ import React from 'react';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { EventSubscription } from 'fbemitter';
+import AppTile from "./AppTile";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+interface IState {
+    roomId: string;
+    persistentWidgetId: string;
+}
 
 @replaceableComponent("views.elements.PersistentApp")
-export default class PersistentApp extends React.Component {
-    state = {
-        roomId: RoomViewStore.getRoomId(),
-        persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
-    };
+export default class PersistentApp extends React.Component<{}, IState> {
+    private roomStoreToken: EventSubscription;
 
-    componentDidMount() {
-        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
-        ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
-        MatrixClientPeg.get().on("Room.myMembership", this._onMyMembership);
+    constructor() {
+        super({});
+
+        this.state = {
+            roomId: RoomViewStore.getRoomId(),
+            persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+        };
     }
 
-    componentWillUnmount() {
-        if (this._roomStoreToken) {
-            this._roomStoreToken.remove();
+    public componentDidMount(): void {
+        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+        ActiveWidgetStore.on('update', this.onActiveWidgetStoreUpdate);
+        MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
+    }
+
+    public componentWillUnmount(): void {
+        if (this.roomStoreToken) {
+            this.roomStoreToken.remove();
         }
-        ActiveWidgetStore.removeListener('update', this._onActiveWidgetStoreUpdate);
+        ActiveWidgetStore.removeListener('update', this.onActiveWidgetStoreUpdate);
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room.myMembership", this._onMyMembership);
+            MatrixClientPeg.get().removeListener("Room.myMembership", this.onMyMembership);
         }
     }
 
-    _onRoomViewStoreUpdate = payload => {
+    private onRoomViewStoreUpdate = (): void => {
         if (RoomViewStore.getRoomId() === this.state.roomId) return;
         this.setState({
             roomId: RoomViewStore.getRoomId(),
         });
     };
 
-    _onActiveWidgetStoreUpdate = () => {
+    private onActiveWidgetStoreUpdate = (): void => {
         this.setState({
             persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
         });
     };
 
-    _onMyMembership = async (room, membership) => {
+    private onMyMembership = async (room: Room, membership: string): Promise<void> => {
         const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
         if (membership !== "join") {
             // we're not in the room anymore - delete
-            if (room.roomId === persistentWidgetInRoomId) {
+            if (room .roomId === persistentWidgetInRoomId) {
                 ActiveWidgetStore.destroyPersistentWidget(this.state.persistentWidgetId);
             }
         }
     };
 
-    render() {
+    public render(): JSX.Element {
         if (this.state.persistentWidgetId) {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
 
@@ -89,7 +102,6 @@ export default class PersistentApp extends React.Component {
                     appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
                     persistentWidgetInRoomId, appEvent.getId(),
                 );
-                const AppTile = sdk.getComponent('elements.AppTile');
                 return <AppTile
                     key={app.id}
                     app={app}

src/components/views/elements/PowerSelector.tsx

@@ -15,40 +15,52 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+const CUSTOM_VALUE = "SELECT_VALUE_CUSTOM";
+
+interface IProps {
+    value: number;
+    // The maximum value that can be set with the power selector
+    maxValue: number;
+
+    // Default user power level for the room
+    usersDefault: number;
+
+    // should the user be able to change the value? false by default.
+    disabled?: boolean;
+    onChange?: (value: number, powerLevelKey: string) => void;
+
+    // Optional key to pass as the second argument to `onChange`
+    powerLevelKey?: string;
+
+    // The name to annotate the selector with
+    label?: string;
+}
+
+interface IState {
+    levelRoleMap: {};
+    // List of power levels to show in the drop-down
+    options: number[];
+
+    customValue: number;
+    selectValue: number | string;
+    custom?: boolean;
+    customLevel?: number;
+}
+
 @replaceableComponent("views.elements.PowerSelector")
-export default class PowerSelector extends React.Component {
-    static propTypes = {
-        value: PropTypes.number.isRequired,
-        // The maximum value that can be set with the power selector
-        maxValue: PropTypes.number.isRequired,
-
-        // Default user power level for the room
-        usersDefault: PropTypes.number.isRequired,
-
-        // should the user be able to change the value? false by default.
-        disabled: PropTypes.bool,
-        onChange: PropTypes.func,
-
-        // Optional key to pass as the second argument to `onChange`
-        powerLevelKey: PropTypes.string,
-
-        // The name to annotate the selector with
-        label: PropTypes.string,
-    }
-
-    static defaultProps = {
+export default class PowerSelector extends React.Component<IProps, IState> {
+    public static defaultProps: Partial<IProps> = {
         maxValue: Infinity,
         usersDefault: 0,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -62,26 +74,26 @@ export default class PowerSelector extends React.Component {
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillMount() {
-        this._initStateFromProps(this.props);
+    // eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
+    public UNSAFE_componentWillMount(): void {
+        this.initStateFromProps(this.props);
     }
 
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(newProps) {
-        this._initStateFromProps(newProps);
+    // eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
+    public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
+        this.initStateFromProps(newProps);
     }
 
-    _initStateFromProps(newProps) {
+    private initStateFromProps(newProps: IProps): void {
         // This needs to be done now because levelRoleMap has translated strings
         const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
         const options = Object.keys(levelRoleMap).filter(level => {
             return (
                 level === undefined ||
-                level <= newProps.maxValue ||
-                level == newProps.value
+                parseInt(level) <= newProps.maxValue ||
+                parseInt(level) == newProps.value
             );
-        });
+        }).map(level => parseInt(level));
 
         const isCustom = levelRoleMap[newProps.value] === undefined;
 
@@ -90,32 +102,33 @@ export default class PowerSelector extends React.Component {
             options,
             custom: isCustom,
             customLevel: newProps.value,
-            selectValue: isCustom ? "SELECT_VALUE_CUSTOM" : newProps.value,
+            selectValue: isCustom ? CUSTOM_VALUE : newProps.value,
         });
     }
 
-    onSelectChange = event => {
-        const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
+    private onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+        const isCustom = event.target.value === CUSTOM_VALUE;
         if (isCustom) {
             this.setState({ custom: true });
         } else {
-            this.props.onChange(event.target.value, this.props.powerLevelKey);
-            this.setState({ selectValue: event.target.value });
+            const powerLevel = parseInt(event.target.value);
+            this.props.onChange(powerLevel, this.props.powerLevelKey);
+            this.setState({ selectValue: powerLevel });
         }
     };
 
-    onCustomChange = event => {
-        this.setState({ customValue: event.target.value });
+    private onCustomChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        this.setState({ customValue: parseInt(event.target.value) });
     };
 
-    onCustomBlur = event => {
+    private onCustomBlur = (event: React.FocusEvent): void => {
         event.preventDefault();
         event.stopPropagation();
 
-        this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey);
+        this.props.onChange(this.state.customValue, this.props.powerLevelKey);
     };
 
-    onCustomKeyDown = event => {
+    private onCustomKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
         if (event.key === Key.ENTER) {
             event.preventDefault();
             event.stopPropagation();
@@ -125,11 +138,11 @@ export default class PowerSelector extends React.Component {
             // raising a dialog which causes a blur which causes a dialog which causes a blur and
             // so on. By not causing the onChange to be called here, we avoid the loop because we
             // handle the onBlur safely.
-            event.target.blur();
+            (event.target as HTMLInputElement).blur();
         }
     };
 
-    render() {
+    public render(): JSX.Element {
         let picker;
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {
@@ -147,14 +160,14 @@ export default class PowerSelector extends React.Component {
             );
         } else {
             // Each level must have a definition in this.state.levelRoleMap
-            let options = this.state.options.map((level) => {
+            const options = this.state.options.map((level) => {
                 return {
-                    value: level,
+                    value: String(level),
                     text: Roles.textualPowerLevel(level, this.props.usersDefault),
                 };
             });
-            options.push({ value: "SELECT_VALUE_CUSTOM", text: _t("Custom level") });
-            options = options.map((op) => {
+            options.push({ value: CUSTOM_VALUE, text: _t("Custom level") });
+            const optionsElements = options.map((op) => {
                 return <option value={op.value} key={op.value}>{ op.text }</option>;
             });
 
@@ -166,7 +179,7 @@ export default class PowerSelector extends React.Component {
                     value={String(this.state.selectValue)}
                     disabled={this.props.disabled}
                 >
-                    { options }
+                    { optionsElements }
                 </Field>
             );
         }

src/components/views/elements/ReplyThread.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { UNSTABLE_ELEMENT_REPLY_IN_THREAD } from "matrix-js-sdk/src/@types/event";
 import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
@@ -88,7 +89,13 @@ export default class ReplyThread extends React.Component<IProps, IState> {
         // could be used here for replies as well... However, the helper
         // currently assumes the relation has a `rel_type`, which older replies
         // do not, so this block is left as-is for now.
-        const mRelatesTo = ev.getWireContent()['m.relates_to'];
+        //
+        // We're prefer ev.getContent() over ev.getWireContent() to make sure
+        // we grab the latest edit with potentially new relations. But we also
+        // can't just rely on ev.getContent() by itself because historically we
+        // still show the reply from the original message even though the edit
+        // event does not include the relation reply.
+        const mRelatesTo = ev.getContent()['m.relates_to'] || ev.getWireContent()['m.relates_to'];
         if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
             const mInReplyTo = mRelatesTo['m.in_reply_to'];
             if (mInReplyTo && mInReplyTo['event_id']) return mInReplyTo['event_id'];
@@ -207,15 +214,28 @@ export default class ReplyThread extends React.Component<IProps, IState> {
         return { body, html };
     }
 
-    public static makeReplyMixIn(ev: MatrixEvent) {
+    public static makeReplyMixIn(ev: MatrixEvent, replyInThread: boolean) {
         if (!ev) return {};
-        return {
+
+        const replyMixin = {
             'm.relates_to': {
                 'm.in_reply_to': {
                     'event_id': ev.getId(),
                 },
             },
         };
+
+        /**
+         * @experimental
+         * Rendering hint for threads, only attached if true to make
+         * sure that Element does not start sending that property for all events
+         */
+        if (replyInThread) {
+            const inReplyTo = replyMixin['m.relates_to']['m.in_reply_to'];
+            inReplyTo[UNSTABLE_ELEMENT_REPLY_IN_THREAD.name] = replyInThread;
+        }
+
+        return replyMixin;
     }
 
     public static makeThread(

src/components/views/elements/ResizeHandle.tsx

@@ -1,27 +1,27 @@
 
 import React from 'react'; // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types';
 
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
-const ResizeHandle = (props) => {
+interface IResizeHandleProps {
+    vertical?: boolean;
+    reverse?: boolean;
+    id?: string;
+    passRef?: React.RefObject<HTMLDivElement>;
+}
+
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
     const classNames = ['mx_ResizeHandle'];
-    if (props.vertical) {
+    if (vertical) {
         classNames.push('mx_ResizeHandle_vertical');
     } else {
         classNames.push('mx_ResizeHandle_horizontal');
     }
-    if (props.reverse) {
+    if (reverse) {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
+        <div ref={passRef} className={classNames.join(' ')} data-id={id}><div /></div>
     );
 };
 
-ResizeHandle.propTypes = {
-    vertical: PropTypes.bool,
-    reverse: PropTypes.bool,
-    id: PropTypes.string,
-};
-
 export default ResizeHandle;

src/components/views/elements/RoomAliasField.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, KeyboardEventHandler } from "react";
 
 import { _t } from '../../../languageHandler';
 import withValidation from './Validation';
@@ -28,6 +28,7 @@ interface IProps {
     label?: string;
     placeholder?: string;
     disabled?: boolean;
+    onKeyDown?: KeyboardEventHandler;
     onChange?(value: string): void;
 }
 
@@ -70,6 +71,8 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
                 value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
                 maxLength={maxlength}
                 disabled={this.props.disabled}
+                autoComplete="off"
+                onKeyDown={this.props.onKeyDown}
             />
         );
     }

src/components/views/elements/Spoiler.tsx

@@ -17,25 +17,34 @@
 import React from 'react';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    reason?: string;
+    contentHtml: string;
+}
+
+interface IState {
+    visible: boolean;
+}
+
 @replaceableComponent("views.elements.Spoiler")
-export default class Spoiler extends React.Component {
-    constructor(props) {
+export default class Spoiler extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             visible: false,
         };
     }
 
-    toggleVisible(e) {
+    private toggleVisible = (e: React.MouseEvent): void => {
         if (!this.state.visible) {
             // we are un-blurring, we don't want this click to propagate to potential child pills
             e.preventDefault();
             e.stopPropagation();
         }
         this.setState({ visible: !this.state.visible });
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         const reason = this.props.reason ? (
             <span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
         ) : null;
@@ -43,7 +52,7 @@ export default class Spoiler extends React.Component {
         // as such, we pass the this.props.contentHtml instead and then set the raw
         // HTML content. This is secure as the contents have already been parsed previously
         return (
-            <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
+            <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible}>
                 { reason }
                 &nbsp;
                 <span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />

src/components/views/elements/SyntaxHighlight.tsx

@@ -15,40 +15,40 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { highlightBlock } from 'highlight.js';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
 @replaceableComponent("views.elements.SyntaxHighlight")
-export default class SyntaxHighlight extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node,
-    };
+export default class SyntaxHighlight extends React.Component<IProps> {
+    private el: HTMLPreElement = null;
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
-
-        this._ref = this._ref.bind(this);
     }
 
     // componentDidUpdate used here for reusability
-    componentDidUpdate() {
-        if (this._el) highlightBlock(this._el);
+    public componentDidUpdate(): void {
+        if (this.el) highlightBlock(this.el);
     }
 
     // call componentDidUpdate because _ref is fired on initial render
     // which does not fire componentDidUpdate
-    _ref(el) {
-        this._el = el;
+    private ref = (el: HTMLPreElement): void => {
+        this.el = el;
         this.componentDidUpdate();
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         const { className, children } = this.props;
 
-        return <pre className={`${className} mx_SyntaxHighlight`} ref={this._ref}>
+        return <pre className={`${className} mx_SyntaxHighlight`} ref={this.ref}>
             <code>{ children }</code>
         </pre>;
     }
 }
+

src/components/views/elements/TextWithTooltip.tsx

@@ -15,42 +15,44 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "./Tooltip";
+
+interface IProps {
+    class?: string;
+    tooltipClass?: string;
+    tooltip: React.ReactNode;
+    tooltipProps?: {};
+    onClick?: (ev?: React.MouseEvent) => void;
+}
+
+interface IState {
+    hover: boolean;
+}
 
 @replaceableComponent("views.elements.TextWithTooltip")
-export default class TextWithTooltip extends React.Component {
-    static propTypes = {
-        class: PropTypes.string,
-        tooltipClass: PropTypes.string,
-        tooltip: PropTypes.node.isRequired,
-        tooltipProps: PropTypes.object,
-    };
-
-    constructor() {
-        super();
+export default class TextWithTooltip extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
             hover: false,
         };
     }
 
-    onMouseOver = () => {
+    private onMouseOver = (): void => {
         this.setState({ hover: true });
     };
 
-    onMouseLeave = () => {
+    private onMouseLeave = (): void => {
         this.setState({ hover: false });
     };
 
-    render() {
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-
+    public render(): JSX.Element {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
         return (
-            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
+            <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick} className={className}>
                 { children }
                 { this.state.hover && <Tooltip
                     {...tooltipProps}

src/components/views/elements/crypto/VerificationQRCode.tsx

@@ -15,20 +15,20 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from "prop-types";
 import { replaceableComponent } from "../../../../utils/replaceableComponent";
 import QRCode from "../QRCode";
+import { QRCodeData } from "matrix-js-sdk/src/crypto/verification/QRCode";
+
+interface IProps {
+    qrCodeData: QRCodeData;
+}
 
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
-export default class VerificationQRCode extends React.PureComponent {
-    static propTypes = {
-        qrCodeData: PropTypes.object.isRequired,
-    };
-
-    render() {
+export default class VerificationQRCode extends React.PureComponent<IProps> {
+    public render(): JSX.Element {
         return (
             <QRCode
-                data={[{ data: this.props.qrCodeData.buffer, mode: 'byte' }]}
+                data={[{ data: this.props.qrCodeData.getBuffer(), mode: 'byte' }]}
                 className="mx_VerificationQRCode"
                 width={196} />
         );

src/components/views/emojipicker/EmojiPicker.tsx

@@ -173,16 +173,16 @@ class EmojiPicker extends React.Component<IProps, IState> {
     };
 
     private onChangeFilter = (filter: string) => {
-        filter = filter.toLowerCase(); // filter is case insensitive stored lower-case
+        const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
         for (const cat of this.categories) {
             let emojis;
             // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
-            if (filter.includes(this.state.filter)) {
+            if (lcFilter.includes(this.state.filter)) {
                 emojis = this.memoizedDataByCategory[cat.id];
             } else {
                 emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
             }
-            emojis = emojis.filter(emoji => this.emojiMatchesFilter(emoji, filter));
+            emojis = emojis.filter(emoji => this.emojiMatchesFilter(emoji, lcFilter));
             this.memoizedDataByCategory[cat.id] = emojis;
             cat.enabled = emojis.length > 0;
             // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
@@ -194,9 +194,12 @@ class EmojiPicker extends React.Component<IProps, IState> {
         setTimeout(this.updateVisibility, 0);
     };
 
-    private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean =>
-        [emoji.annotation, ...emoji.shortcodes, emoji.emoticon, ...emoji.unicode.split(ZERO_WIDTH_JOINER)]
-            .some(x => x?.includes(filter));
+    private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => {
+        return emoji.annotation.toLowerCase().includes(filter) ||
+            emoji.emoticon?.toLowerCase().includes(filter) ||
+            emoji.shortcodes.some(x => x.toLowerCase().includes(filter)) ||
+            emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter);
+    };
 
     private onEnterFilter = () => {
         const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");

src/components/views/messages/CallEvent.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { createRef } from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { _t, _td } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -26,6 +26,7 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
+import Clock from "../audio_messages/Clock";
 
 const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
@@ -38,13 +39,9 @@ interface IState {
     callState: CallState | CustomCallState;
     silenced: boolean;
     narrow: boolean;
+    length: number;
 }
 
-const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
-    [CallState.Connected, _td("Connected")],
-    [CallState.Connecting, _td("Connecting")],
-]);
-
 export default class CallEvent extends React.PureComponent<IProps, IState> {
     private wrapperElement = createRef<HTMLDivElement>();
     private resizeObserver: ResizeObserver;
@@ -56,12 +53,14 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
             callState: this.props.callEventGrouper.state,
             silenced: false,
             narrow: false,
+            length: 0,
         };
     }
 
     componentDidMount() {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+        this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
         this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
         this.resizeObserver.observe(this.wrapperElement.current);
@@ -70,10 +69,15 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
     componentWillUnmount() {
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+        this.props.callEventGrouper.removeListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
         this.resizeObserver.disconnect();
     }
 
+    private onLengthChanged = (length: number): void => {
+        this.setState({ length });
+    };
+
     private resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
         const wrapperElementEntry = entries.find((entry) => entry.target === this.wrapperElement.current);
         if (!wrapperElementEntry) return;
@@ -214,10 +218,17 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
                 </div>
             );
         }
-        if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+        if (state === CallState.Connected) {
             return (
                 <div className="mx_CallEvent_content">
-                    { TEXTUAL_STATES.get(state) }
+                    <Clock seconds={this.state.length} />
+                </div>
+            );
+        }
+        if (state === CallState.Connecting) {
+            return (
+                <div className="mx_CallEvent_content">
+                    { _t("Connecting") }
                 </div>
             );
         }

src/components/views/messages/EncryptionEvent.tsx

@@ -16,26 +16,38 @@ limitations under the License.
 
 import React, { forwardRef, useContext } from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IRoomEncryption } from "matrix-js-sdk/src/crypto/RoomList";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTileBubble from "./EventTileBubble";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import { objectHasDiff } from "../../../utils/objects";
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
+const ALGORITHM = "m.megolm.v1.aes-sha2";
+
 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) {
+    const prevContent = mxEvent.getPrevContent() as IRoomEncryption;
+    const content = mxEvent.getContent<IRoomEncryption>();
+
+    // if no change happened then skip rendering this, a shallow check is enough as all known fields are top-level.
+    if (!objectHasDiff(prevContent, content)) return null; // nop
+
+    if (content.algorithm === ALGORITHM && isRoomEncrypted) {
         let subtitle: string;
         const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
-        if (dmPartner) {
+        if (prevContent.algorithm === ALGORITHM) {
+            subtitle = _t("Some encryption parameters have been changed.");
+        } else 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 });
@@ -49,7 +61,9 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
             title={_t("Encryption enabled")}
             subtitle={subtitle}
         />;
-    } else if (isRoomEncrypted) {
+    }
+
+    if (isRoomEncrypted) {
         return <EventTileBubble
             className="mx_cryptoEvent mx_cryptoEvent_icon"
             title={_t("Encryption enabled")}

src/components/views/messages/MAudioBody.tsx

@@ -24,6 +24,8 @@ import { IMediaEventContent } from "../../../customisations/models/IMediaEventCo
 import MFileBody from "./MFileBody";
 import { IBodyProps } from "./IBodyProps";
 import { PlaybackManager } from "../../../audio/PlaybackManager";
+import { isVoiceMessage } from "../../../utils/EventUtils";
+import { PlaybackQueue } from "../../../audio/PlaybackQueue";
 
 interface IState {
     error?: Error;
@@ -67,6 +69,10 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         playback.clockInfo.populatePlaceholdersFrom(this.props.mxEvent);
         this.setState({ playback });
 
+        if (isVoiceMessage(this.props.mxEvent)) {
+            PlaybackQueue.forRoom(this.props.mxEvent.getRoomId()).unsortedEnqueue(this.props.mxEvent, playback);
+        }
+
         // Note: the components later on will handle preparing the Playback class for us.
     }
 

src/components/views/messages/MFileBody.tsx

@@ -29,6 +29,8 @@ import { IBodyProps } from "./IBodyProps";
 import { FileDownloader } from "../../../utils/FileDownloader";
 import TextWithTooltip from "../elements/TextWithTooltip";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
 
 async function cacheDownloadIcon() {
@@ -293,7 +295,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
             if (["application/pdf"].includes(fileType) && !fileTooBig) {
                 // We want to force a download on this type, so use an onClick handler.
                 downloadProps["onClick"] = (e) => {
-                    console.log(`Downloading ${fileType} as blob (unencrypted)`);
+                    logger.log(`Downloading ${fileType} as blob (unencrypted)`);
 
                     // Avoid letting the <a> do its thing
                     e.preventDefault();

src/components/views/messages/MImageBody.tsx

@@ -55,6 +55,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     static contextType = MatrixClientContext;
     private unmounted = true;
     private image = createRef<HTMLImageElement>();
+    private timeout?: number;
 
     constructor(props: IBodyProps) {
         super(props);
@@ -116,6 +117,17 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 params.fileSize = content.info.size;
             }
 
+            if (this.image.current) {
+                const clientRect = this.image.current.getBoundingClientRect();
+
+                params.thumbnailInfo = {
+                    width: clientRect.width,
+                    height: clientRect.height,
+                    positionX: clientRect.x,
+                    positionY: clientRect.y,
+                };
+            }
+
             Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
         }
     };
@@ -128,7 +140,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: true });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -138,7 +150,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: false });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -146,12 +158,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     };
 
     private onImageError = (): void => {
+        this.clearBlurhashTimeout();
         this.setState({
             imgError: true,
         });
     };
 
     private onImageLoad = (): void => {
+        this.clearBlurhashTimeout();
         this.props.onHeightChanged();
 
         let loadedImageDimensions;
@@ -270,6 +284,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     }
 
+    private clearBlurhashTimeout() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = undefined;
+        }
+    }
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on('sync', this.onClientSync);
@@ -284,8 +305,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         } // else don't download anything because we don't want to display anything.
 
         // Add a 150ms timer for blurhash to first appear.
-        if (this.media.isEncrypted) {
-            setTimeout(() => {
+        if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
+            this.clearBlurhashTimeout();
+            this.timeout = setTimeout(() => {
                 if (!this.state.imgLoaded || !this.state.imgError) {
                     this.setState({
                         placeholder: 'blurhash',
@@ -298,6 +320,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     componentWillUnmount() {
         this.unmounted = true;
         this.context.removeListener('sync', this.onClientSync);
+        this.clearBlurhashTimeout();
     }
 
     protected messageContent(
@@ -390,13 +413,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
-        if (this.isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
+        if (this.isGif() && !SettingsStore.getValue("autoplayGifs") && !this.state.hover) {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
         const classes = classNames({
             'mx_MImageBody_thumbnail': true,
-            'mx_MImageBody_thumbnail--blurhash': this.props.mxEvent.getContent().info[BLURHASH_FIELD],
+            'mx_MImageBody_thumbnail--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
         });
 
         // This has incredibly broken types.
@@ -449,7 +472,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
     // Overidden by MStickerBody
     protected getPlaceholder(width: number, height: number): JSX.Element {
-        const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
+        const blurhash = this.props.mxEvent.getContent().info?.[BLURHASH_FIELD];
 
         if (blurhash) {
             if (this.state.placeholder === 'no-image') {
@@ -491,7 +514,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const contentUrl = this.getContentUrl();
         let thumbUrl;
-        if (this.props.forExport || (this.isGif() && SettingsStore.getValue("autoplayGifsAndVideos"))) {
+        if (this.props.forExport || (this.isGif() && SettingsStore.getValue("autoplayGifs"))) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this.getThumbUrl();

src/components/views/messages/MStickerBody.tsx

@@ -43,7 +43,7 @@ export default class MStickerBody extends MImageBody {
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
     protected getPlaceholder(width: number, height: number): JSX.Element {
-        if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
+        if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 

src/components/views/messages/MVideoBody.tsx

@@ -27,6 +27,8 @@ import { IMediaEventContent } from "../../../customisations/models/IMediaEventCo
 import { IBodyProps } from "./IBodyProps";
 import MFileBody from "./MFileBody";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 interface IState {
     decryptedUrl?: string;
     decryptedThumbnailUrl?: string;
@@ -151,14 +153,14 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     }
 
     async componentDidMount() {
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
+        const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
         this.loadBlurhash();
 
         if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) {
             try {
                 const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value;
                 if (autoplay) {
-                    console.log("Preloading video");
+                    logger.log("Preloading video");
                     this.setState({
                         decryptedUrl: await this.props.mediaEventHelper.sourceUrl.value,
                         decryptedThumbnailUrl: thumbnailUrl,
@@ -166,7 +168,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                     });
                     this.props.onHeightChanged();
                 } else {
-                    console.log("NOT preloading video");
+                    logger.log("NOT preloading video");
                     const content = this.props.mxEvent.getContent<IMediaEventContent>();
                     this.setState({
                         // For Chrome and Electron, we need to set some non-empty `src` to
@@ -220,7 +222,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
     render() {
         const content = this.props.mxEvent.getContent();
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
+        const autoplay = SettingsStore.getValue("autoplayVideo");
 
         if (this.state.error !== null) {
             return (

src/components/views/messages/MVoiceOrAudioBody.tsx

@@ -19,14 +19,12 @@ import MAudioBody from "./MAudioBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import MVoiceMessageBody from "./MVoiceMessageBody";
 import { IBodyProps } from "./IBodyProps";
+import { isVoiceMessage } from "../../../utils/EventUtils";
 
 @replaceableComponent("views.messages.MVoiceOrAudioBody")
 export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
     public render() {
-        // MSC2516 is a legacy identifier. See https://github.com/matrix-org/matrix-doc/pull/3245
-        const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice']
-            || !!this.props.mxEvent.getContent()['org.matrix.msc3245.voice'];
-        if (!this.props.forExport && isVoiceMessage) {
+        if (!this.props.forExport && isVoiceMessage(this.props.mxEvent)) {
             return <MVoiceMessageBody {...this.props} />;
         } else {
             return <MAudioBody {...this.props} />;

src/components/views/messages/MessageActionBar.tsx

@@ -17,12 +17,13 @@ limitations under the License.
 */
 
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
+import { Action } from '../../../dispatcher/actions';
+import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
 import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
@@ -34,48 +35,66 @@ import Resend from "../../../Resend";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import DownloadActionButton from "./DownloadActionButton";
+import SettingsStore from '../../../settings/SettingsStore';
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import ReplyThread from '../elements/ReplyThread';
 
-const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
-    useEffect(() => {
-        onFocusChange(menuDisplayed);
-    }, [onFocusChange, menuDisplayed]);
+interface IOptionsButtonProps {
+    mxEvent: MatrixEvent;
+    getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
+    getReplyThread: () => ReplyThread;
+    permalinkCreator: RoomPermalinkCreator;
+    onFocusChange: (menuDisplayed: boolean) => void;
+}
 
-    let contextMenu;
-    if (menuDisplayed) {
-        const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
+const OptionsButton: React.FC<IOptionsButtonProps> =
+    ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
+        const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+        const [onFocus, isActive, ref] = useRovingTabIndex(button);
+        useEffect(() => {
+            onFocusChange(menuDisplayed);
+        }, [onFocusChange, menuDisplayed]);
 
-        const tile = getTile && getTile();
-        const replyThread = getReplyThread && getReplyThread();
+        let contextMenu;
+        if (menuDisplayed) {
+            const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
 
-        const buttonRect = button.current.getBoundingClientRect();
-        contextMenu = <MessageContextMenu
-            {...aboveLeftOf(buttonRect)}
-            mxEvent={mxEvent}
-            permalinkCreator={permalinkCreator}
-            eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
-            collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
-            onFinished={closeMenu}
-        />;
-    }
+            const tile = getTile && getTile();
+            const replyThread = getReplyThread && getReplyThread();
 
-    return <React.Fragment>
-        <ContextMenuTooltipButton
-            className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
-            title={_t("Options")}
-            onClick={openMenu}
-            isExpanded={menuDisplayed}
-            inputRef={ref}
-            onFocus={onFocus}
-            tabIndex={isActive ? 0 : -1}
-        />
+            const buttonRect = button.current.getBoundingClientRect();
+            contextMenu = <MessageContextMenu
+                {...aboveLeftOf(buttonRect)}
+                mxEvent={mxEvent}
+                permalinkCreator={permalinkCreator}
+                eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
+                collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
+                onFinished={closeMenu}
+            />;
+        }
 
-        { contextMenu }
-    </React.Fragment>;
-};
+        return <React.Fragment>
+            <ContextMenuTooltipButton
+                className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+                title={_t("Options")}
+                onClick={openMenu}
+                isExpanded={menuDisplayed}
+                inputRef={ref}
+                onFocus={onFocus}
+                tabIndex={isActive ? 0 : -1}
+            />
 
-const ReactButton = ({ mxEvent, reactions, onFocusChange }) => {
+            { contextMenu }
+        </React.Fragment>;
+    };
+
+interface IReactButtonProps {
+    mxEvent: MatrixEvent;
+    reactions: any; // TODO: types
+    onFocusChange: (menuDisplayed: boolean) => void;
+}
+
+const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const [onFocus, isActive, ref] = useRovingTabIndex(button);
     useEffect(() => {
@@ -106,21 +125,21 @@ const ReactButton = ({ mxEvent, reactions, onFocusChange }) => {
     </React.Fragment>;
 };
 
+interface IMessageActionBarProps {
+    mxEvent: MatrixEvent;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions?: any;  // TODO: types
+    permalinkCreator?: RoomPermalinkCreator;
+    getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
+    getReplyThread?: () => ReplyThread;
+    onFocusChange?: (menuDisplayed: boolean) => void;
+}
+
 @replaceableComponent("views.messages.MessageActionBar")
-export default class MessageActionBar extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
-        permalinkCreator: PropTypes.object,
-        getTile: PropTypes.func,
-        getReplyThread: PropTypes.func,
-        onFocusChange: PropTypes.func,
-    };
+export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
+    public static contextType = RoomContext;
 
-    static contextType = RoomContext;
-
-    componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
             this.props.mxEvent.on("Event.status", this.onSent);
         }
@@ -134,43 +153,54 @@ export default class MessageActionBar extends React.PureComponent {
         this.props.mxEvent.on("Event.beforeRedaction", this.onBeforeRedaction);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.props.mxEvent.off("Event.status", this.onSent);
         this.props.mxEvent.off("Event.decrypted", this.onDecrypted);
         this.props.mxEvent.off("Event.beforeRedaction", this.onBeforeRedaction);
     }
 
-    onDecrypted = () => {
+    private onDecrypted = (): void => {
         // When an event decrypts, it is likely to change the set of available
         // actions, so we force an update to check again.
         this.forceUpdate();
     };
 
-    onBeforeRedaction = () => {
+    private onBeforeRedaction = (): void => {
         // When an event is redacted, we can't edit it so update the available actions.
         this.forceUpdate();
     };
 
-    onSent = () => {
+    private onSent = (): void => {
         // When an event is sent and echoed the possible actions change.
         this.forceUpdate();
     };
 
-    onFocusChange = (focused) => {
+    private onFocusChange = (focused: boolean): void => {
         if (!this.props.onFocusChange) {
             return;
         }
         this.props.onFocusChange(focused);
     };
 
-    onReplyClick = (ev) => {
+    private onReplyClick = (ev: React.MouseEvent): void => {
         dis.dispatch({
             action: 'reply_to_event',
             event: this.props.mxEvent,
         });
     };
 
-    onEditClick = (ev) => {
+    private onThreadClick = (): void => {
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.ThreadView,
+            allowClose: false,
+            refireParams: {
+                event: this.props.mxEvent,
+            },
+        });
+    };
+
+    private onEditClick = (ev: React.MouseEvent): void => {
         dis.dispatch({
             action: 'edit_event',
             event: this.props.mxEvent,
@@ -186,7 +216,7 @@ export default class MessageActionBar extends React.PureComponent {
      * @param {Function} fn The execution function.
      * @param {Function} checkFn The test function.
      */
-    runActionOnFailedEv(fn, checkFn) {
+    private runActionOnFailedEv(fn: (ev: MatrixEvent) => void, checkFn?: (ev: MatrixEvent) => boolean): void {
         if (!checkFn) checkFn = () => true;
 
         const mxEvent = this.props.mxEvent;
@@ -201,18 +231,18 @@ export default class MessageActionBar extends React.PureComponent {
         }
     }
 
-    onResendClick = (ev) => {
+    private onResendClick = (ev: React.MouseEvent): void => {
         this.runActionOnFailedEv((tarEv) => Resend.resend(tarEv));
     };
 
-    onCancelClick = (ev) => {
+    private onCancelClick = (ev: React.MouseEvent): void => {
         this.runActionOnFailedEv(
             (tarEv) => Resend.removeFromQueue(tarEv),
             (testEv) => canCancel(testEv.status),
         );
     };
 
-    render() {
+    public render(): JSX.Element {
         const toolbarOpts = [];
         if (canEditContent(this.props.mxEvent)) {
             toolbarOpts.push(<RovingAccessibleTooltipButton
@@ -235,7 +265,7 @@ export default class MessageActionBar extends React.PureComponent {
         const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
         const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
         const allowCancel = canCancel(mxEvent.status) || canCancel(editStatus) || canCancel(redactStatus);
-        const isFailed = [mxEvent.status, editStatus, redactStatus].includes("not_sent");
+        const isFailed = [mxEvent.status, editStatus, redactStatus].includes(EventStatus.NOT_SENT);
         if (allowCancel && isFailed) {
             // The resend button needs to appear ahead of the edit button, so insert to the
             // start of the opts
@@ -254,12 +284,22 @@ export default class MessageActionBar extends React.PureComponent {
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
                 if (this.context.canReply) {
-                    toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
-                        className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
-                        title={_t("Reply")}
-                        onClick={this.onReplyClick}
-                        key="reply"
-                    />);
+                    toolbarOpts.splice(0, 0, <>
+                        <RovingAccessibleTooltipButton
+                            className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
+                            title={_t("Reply")}
+                            onClick={this.onReplyClick}
+                            key="reply"
+                        />
+                        { SettingsStore.getValue("feature_thread") && (
+                            <RovingAccessibleTooltipButton
+                                className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                                title={_t("Thread")}
+                                onClick={this.onThreadClick}
+                                key="thread"
+                            />
+                        ) }
+                    </>);
                 }
                 if (this.context.canReact) {
                     toolbarOpts.splice(0, 0, <ReactButton

src/components/views/messages/ReactionsRowButton.tsx

@@ -106,31 +106,20 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        let label;
+        let label: string;
         if (room) {
             const senders = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender());
-                const name = member ? member.name : reactionEvent.getSender();
-                senders.push(name);
+                senders.push(member?.name || reactionEvent.getSender());
+            }
+
+            const reactors = formatCommaSeparatedList(senders, 6);
+            if (content) {
+                label = _t("%(reactors)s reacted with %(content)s", { reactors, content });
+            } else {
+                label = reactors;
             }
-            label = _t(
-                "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
-                {
-                    content,
-                },
-                {
-                    reactors: () => {
-                        return formatCommaSeparatedList(senders, 6);
-                    },
-                    reactedWith: (sub) => {
-                        if (!content) {
-                            return null;
-                        }
-                        return sub;
-                    },
-                },
-            );
         }
         const isPeeking = room.getMyMembership() !== "join";
         return <AccessibleButton

src/components/views/right_panel/EncryptionPanel.tsx

@@ -57,7 +57,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
     const [isRequesting, setRequesting] = useState(false);
-    const [phase, setPhase] = useState(request && request.phase);
+    const [phase, setPhase] = useState(request?.phase);
     useEffect(() => {
         setRequest(verificationRequest);
         if (verificationRequest) {

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -220,6 +220,13 @@ const onRoomFilesClick = () => {
     });
 };
 
+const onRoomThreadsClick = () => {
+    defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+        action: Action.SetRightPanelPhase,
+        phase: RightPanelPhases.ThreadPanel,
+    });
+};
+
 const onRoomSettingsClick = () => {
     defaultDispatcher.dispatch({ action: "open_room_settings" });
 };
@@ -283,6 +290,11 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
                 { _t("Export chat") }
             </Button>
+            { SettingsStore.getValue("feature_thread") && (
+                <Button className="mx_RoomSummaryCard_icon_threads" onClick={onRoomThreadsClick}>
+                    { _t("Show threads") }
+                </Button>
+            ) }
             <Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
                 { _t("Share room") }
             </Button>

src/components/views/right_panel/UserInfo.tsx

@@ -71,6 +71,8 @@ import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import SpaceStore from "../../../stores/SpaceStore";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 export interface IDevice {
     deviceId: string;
     ambiguous?: boolean;
@@ -428,8 +430,8 @@ const UserOptionsSection: React.FC<{
     let directMessageButton;
     if (!isMe) {
         directMessageButton = (
-            <AccessibleButton onClick={() => openDMForUser(cli, member.userId)} className="mx_UserInfo_field">
-                { _t('Direct message') }
+            <AccessibleButton onClick={() => { openDMForUser(cli, member.userId); }} className="mx_UserInfo_field">
+                { _t("Message") }
             </AccessibleButton>
         );
     }
@@ -557,7 +559,7 @@ const RoomKickButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdat
         cli.kick(member.roomId, member.userId, reason || undefined).then(() => {
             // NO-OP; rely on the m.room.member event coming down else we could
             // get out of sync if we force setState here!
-            console.log("Kick success");
+            logger.log("Kick success");
         }, function(err) {
             console.error("Kick error: " + err);
             Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
@@ -684,7 +686,7 @@ const BanToggleButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpda
         promise.then(() => {
             // 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("Ban success");
+            logger.log("Ban success");
         }, function(err) {
             console.error("Ban error: " + err);
             Modal.createTrackedDialog('Failed to ban user', '', ErrorDialog, {
@@ -757,7 +759,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels,
             cli.setPowerLevel(roomId, target, level, powerLevelEvent).then(() => {
                 // 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("Mute toggle success");
+                logger.log("Mute toggle success");
             }, function(err) {
                 console.error("Mute error: " + err);
                 Modal.createTrackedDialog('Failed to mute user', '', ErrorDialog, {
@@ -826,7 +828,7 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     if (canAffectUser && me.powerLevel >= banPowerLevel) {
         banButton = <BanToggleButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
     }
-    if (canAffectUser && me.powerLevel >= editPowerLevel) {
+    if (canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) {
         muteButton = (
             <MuteToggleButton
                 member={member}
@@ -917,7 +919,7 @@ const GroupAdminToolsSection: React.FC<{
                         _t('Failed to withdraw invitation') :
                         _t('Failed to remove user from community'),
                 });
-                console.log(e);
+                logger.log(e);
             }).finally(() => {
                 stopUpdating();
             });
@@ -1052,8 +1054,7 @@ const PowerLevelEditor: React.FC<{
     const cli = useContext(MatrixClientContext);
 
     const [selectedPowerLevel, setSelectedPowerLevel] = useState(user.powerLevel);
-    const onPowerChange = useCallback(async (powerLevelStr: string) => {
-        const powerLevel = parseInt(powerLevelStr, 10);
+    const onPowerChange = useCallback(async (powerLevel: number) => {
         setSelectedPowerLevel(powerLevel);
 
         const applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
@@ -1061,7 +1062,7 @@ const PowerLevelEditor: React.FC<{
                 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");
+                    logger.log("Power change success");
                 }, function(err) {
                     console.error("Failed to change power level " + err);
                     Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
@@ -1278,7 +1279,9 @@ const BasicUserInfo: React.FC<{
         // hide the Roles section for DMs as it doesn't make sense there
         if (!DMRoomMap.shared().getUserIdForRoomId((member as RoomMember).roomId)) {
             memberDetails = <div className="mx_UserInfo_container">
-                <h3>{ _t("Role") }</h3>
+                <h3>{ _t("Role in <RoomName/>", {}, {
+                    RoomName: () => <b>{ room.name }</b>,
+                }) }</h3>
                 <PowerLevelSection
                     powerLevels={powerLevels}
                     user={member as RoomMember}
@@ -1573,11 +1576,12 @@ const UserInfo: React.FC<IProps> = ({
     // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
     if (room && phase === RightPanelPhases.EncryptionPanel) {
         previousPhase = RightPanelPhases.RoomMemberInfo;
-        refireParams = { member: member };
+        refireParams = { member };
+    } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) {
+        previousPhase = previousPhase = RightPanelPhases.SpaceMemberList;
+        refireParams = { space: room };
     } else if (room) {
-        previousPhase = previousPhase = SpaceStore.spacesEnabled && room.isSpaceRoom()
-            ? RightPanelPhases.SpaceMemberList
-            : RightPanelPhases.RoomMemberList;
+        previousPhase = RightPanelPhases.RoomMemberList;
     }
 
     const onEncryptionPanelClose = () => {

src/components/views/right_panel/VerificationPanel.tsx

@@ -28,44 +28,28 @@ import { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import E2EIcon from "../rooms/E2EIcon";
-import {
-    PHASE_READY,
-    PHASE_DONE,
-    PHASE_STARTED,
-    PHASE_CANCELLED,
-} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import E2EIcon, { E2EState } from "../rooms/E2EIcon";
+import { Phase } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from "../elements/AccessibleButton";
 import VerificationShowSas from "../verification/VerificationShowSas";
 
-// XXX: Should be defined in matrix-js-sdk
-enum VerificationPhase {
-    PHASE_UNSENT,
-    PHASE_REQUESTED,
-    PHASE_READY,
-    PHASE_DONE,
-    PHASE_STARTED,
-    PHASE_CANCELLED,
-}
-
 interface IProps {
     layout: string;
     request: VerificationRequest;
     member: RoomMember | User;
-    phase: VerificationPhase;
+    phase: Phase;
     onClose: () => void;
     isRoomEncrypted: boolean;
     inDialog: boolean;
-    key: number;
 }
 
 interface IState {
-    sasEvent?: SAS;
+    sasEvent?: SAS["sasEvent"];
     emojiButtonClicked?: boolean;
     reciprocateButtonClicked?: boolean;
-    reciprocateQREvent?: ReciprocateQRCode;
+    reciprocateQREvent?: ReciprocateQRCode["reciprocateQREvent"];
 }
 
 @replaceableComponent("views.right_panel.VerificationPanel")
@@ -205,7 +189,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
             // Element Web doesn't support scanning yet, so assume here we're the client being scanned.
             body = <React.Fragment>
                 <p>{ description }</p>
-                <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
+                <E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
                 <div className="mx_VerificationPanel_reciprocateButtons">
                     <AccessibleButton
                         kind="danger"
@@ -268,7 +252,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{ _t("Verified") }</h3>
                 <p>{ description }</p>
-                <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
+                <E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
                 { text ? <p>{ text }</p> : null }
                 <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
                     { _t("Got it") }
@@ -321,9 +305,9 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
         const displayName = (member as User).displayName || (member as RoomMember).name || member.userId;
 
         switch (phase) {
-            case PHASE_READY:
+            case Phase.Ready:
                 return this.renderQRPhase();
-            case PHASE_STARTED:
+            case Phase.Started:
                 switch (request.chosenMethod) {
                     case verificationMethods.RECIPROCATE_QR_CODE:
                         return this.renderQRReciprocatePhase();
@@ -346,9 +330,9 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
                     default:
                         return null;
                 }
-            case PHASE_DONE:
+            case Phase.Done:
                 return this.renderVerifiedPhase();
-            case PHASE_CANCELLED:
+            case Phase.Cancelled:
                 return this.renderCancelledPhase();
         }
         console.error("VerificationPanel unhandled phase:", phase);
@@ -375,7 +359,8 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
 
     private updateVerifierState = () => {
         const { request } = this.props;
-        const { sasEvent, reciprocateQREvent } = request.verifier;
+        const sasEvent = (request.verifier as SAS).sasEvent;
+        const reciprocateQREvent = (request.verifier as ReciprocateQRCode).reciprocateQREvent;
         request.verifier.off('show_sas', this.updateVerifierState);
         request.verifier.off('show_reciprocate_qr', this.updateVerifierState);
         this.setState({ sasEvent, reciprocateQREvent });
@@ -402,7 +387,8 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
         const { request } = this.props;
         request.on("change", this.onRequestChange);
         if (request.verifier) {
-            const { sasEvent, reciprocateQREvent } = request.verifier;
+            const sasEvent = (request.verifier as SAS).sasEvent;
+            const reciprocateQREvent = (request.verifier as ReciprocateQRCode).reciprocateQREvent;
             this.setState({ sasEvent, reciprocateQREvent });
         }
         this.onRequestChange();

src/components/views/right_panel/WidgetCard.tsx

@@ -97,7 +97,6 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
         <AppTile
             app={app}
             fullWidth
-            show
             showMenubar={false}
             room={room}
             userId={cli.getUserId()}

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -15,27 +15,43 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
-import * as sdk from "../../../index";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import AccessibleButton from "../elements/AccessibleButton";
+import AvatarSetting from "../settings/AvatarSetting";
+
+interface IProps {
+    roomId: string;
+}
+
+interface IState {
+    originalDisplayName: string;
+    displayName: string;
+    originalAvatarUrl: string;
+    avatarUrl: string;
+    avatarFile: File;
+    originalTopic: string;
+    topic: string;
+    enableProfileSave: boolean;
+    canSetName: boolean;
+    canSetTopic: boolean;
+    canSetAvatar: boolean;
+}
 
 // TODO: Merge with ProfileSettings?
 @replaceableComponent("views.room_settings.RoomProfileSettings")
-export default class RoomProfileSettings extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
+export default class RoomProfileSettings extends React.Component<IProps, IState> {
+    private avatarUpload = createRef<HTMLInputElement>();
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         const client = MatrixClientPeg.get();
         const room = client.getRoom(props.roomId);
-        if (!room) throw new Error("Expected a room for ID: ", props.roomId);
+        if (!room) throw new Error(`Expected a room for ID: ${props.roomId}`);
 
         const avatarEvent = room.currentState.getStateEvents("m.room.avatar", "");
         let avatarUrl = avatarEvent && avatarEvent.getContent() ? avatarEvent.getContent()["url"] : null;
@@ -60,17 +76,15 @@ export default class RoomProfileSettings extends React.Component {
             canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()),
             canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()),
         };
-
-        this._avatarUpload = createRef();
     }
 
-    _uploadAvatar = () => {
-        this._avatarUpload.current.click();
+    private uploadAvatar = (): void => {
+        this.avatarUpload.current.click();
     };
 
-    _removeAvatar = () => {
+    private removeAvatar = (): void => {
         // clear file upload field so same file can be selected
-        this._avatarUpload.current.value = "";
+        this.avatarUpload.current.value = "";
         this.setState({
             avatarUrl: null,
             avatarFile: null,
@@ -78,7 +92,7 @@ export default class RoomProfileSettings extends React.Component {
         });
     };
 
-    _cancelProfileChanges = async (e) => {
+    private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -92,7 +106,7 @@ export default class RoomProfileSettings extends React.Component {
         });
     };
 
-    _saveProfile = async (e) => {
+    private saveProfile = async (e: React.FormEvent): Promise<void> => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -100,35 +114,46 @@ export default class RoomProfileSettings extends React.Component {
         this.setState({ enableProfileSave: false });
 
         const client = MatrixClientPeg.get();
-        const newState = {};
+
+        let originalDisplayName: string;
+        let avatarUrl: string;
+        let originalAvatarUrl: string;
+        let originalTopic: string;
+        let avatarFile: File;
 
         // TODO: What do we do about errors?
         const displayName = this.state.displayName.trim();
         if (this.state.originalDisplayName !== this.state.displayName) {
             await client.setRoomName(this.props.roomId, displayName);
-            newState.originalDisplayName = displayName;
-            newState.displayName = displayName;
+            originalDisplayName = displayName;
         }
 
         if (this.state.avatarFile) {
             const uri = await client.uploadContent(this.state.avatarFile);
             await client.sendStateEvent(this.props.roomId, 'm.room.avatar', { url: uri }, '');
-            newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
-            newState.originalAvatarUrl = newState.avatarUrl;
-            newState.avatarFile = null;
+            avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
+            originalAvatarUrl = avatarUrl;
+            avatarFile = null;
         } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
             await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {}, '');
         }
 
         if (this.state.originalTopic !== this.state.topic) {
             await client.setRoomTopic(this.props.roomId, this.state.topic);
-            newState.originalTopic = this.state.topic;
+            originalTopic = this.state.topic;
         }
 
-        this.setState(newState);
+        this.setState({
+            originalAvatarUrl,
+            avatarUrl,
+            originalDisplayName,
+            originalTopic,
+            displayName,
+            avatarFile,
+        });
     };
 
-    _onDisplayNameChanged = (e) => {
+    private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ displayName: e.target.value });
         if (this.state.originalDisplayName === e.target.value) {
             this.setState({ enableProfileSave: false });
@@ -137,7 +162,7 @@ export default class RoomProfileSettings extends React.Component {
         }
     };
 
-    _onTopicChanged = (e) => {
+    private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
         this.setState({ topic: e.target.value });
         if (this.state.originalTopic === e.target.value) {
             this.setState({ enableProfileSave: false });
@@ -146,7 +171,7 @@ export default class RoomProfileSettings extends React.Component {
         }
     };
 
-    _onAvatarChanged = (e) => {
+    private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
         if (!e.target.files || !e.target.files.length) {
             this.setState({
                 avatarUrl: this.state.originalAvatarUrl,
@@ -160,7 +185,7 @@ export default class RoomProfileSettings extends React.Component {
         const reader = new FileReader();
         reader.onload = (ev) => {
             this.setState({
-                avatarUrl: ev.target.result,
+                avatarUrl: String(ev.target.result),
                 avatarFile: file,
                 enableProfileSave: true,
             });
@@ -168,10 +193,7 @@ export default class RoomProfileSettings extends React.Component {
         reader.readAsDataURL(file);
     };
 
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
-
+    public render(): JSX.Element {
         let profileSettingsButtons;
         if (
             this.state.canSetName ||
@@ -181,14 +203,14 @@ export default class RoomProfileSettings extends React.Component {
             profileSettingsButtons = (
                 <div className="mx_ProfileSettings_buttons">
                     <AccessibleButton
-                        onClick={this._cancelProfileChanges}
+                        onClick={this.cancelProfileChanges}
                         kind="link"
                         disabled={!this.state.enableProfileSave}
                     >
                         { _t("Cancel") }
                     </AccessibleButton>
                     <AccessibleButton
-                        onClick={this._saveProfile}
+                        onClick={this.saveProfile}
                         kind="primary"
                         disabled={!this.state.enableProfileSave}
                     >
@@ -200,16 +222,16 @@ export default class RoomProfileSettings extends React.Component {
 
         return (
             <form
-                onSubmit={this._saveProfile}
+                onSubmit={this.saveProfile}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
                 <input
                     type="file"
-                    ref={this._avatarUpload}
+                    ref={this.avatarUpload}
                     className="mx_ProfileSettings_avatarUpload"
-                    onChange={this._onAvatarChanged}
+                    onChange={this.onAvatarChanged}
                     accept="image/*"
                 />
                 <div className="mx_ProfileSettings_profile">
@@ -219,7 +241,7 @@ export default class RoomProfileSettings extends React.Component {
                             type="text"
                             value={this.state.displayName}
                             autoComplete="off"
-                            onChange={this._onDisplayNameChanged}
+                            onChange={this.onDisplayNameChanged}
                             disabled={!this.state.canSetName}
                         />
                         <Field
@@ -230,7 +252,7 @@ export default class RoomProfileSettings extends React.Component {
                             type="text"
                             value={this.state.topic}
                             autoComplete="off"
-                            onChange={this._onTopicChanged}
+                            onChange={this.onTopicChanged}
                             element="textarea"
                         />
                     </div>
@@ -238,8 +260,8 @@ export default class RoomProfileSettings extends React.Component {
                         avatarUrl={this.state.avatarUrl}
                         avatarName={this.state.displayName || this.props.roomId}
                         avatarAltText={_t("Room avatar")}
-                        uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
-                        removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
+                        uploadAvatar={this.state.canSetAvatar ? this.uploadAvatar : undefined}
+                        removeAvatar={this.state.canSetAvatar ? this.removeAvatar : undefined} />
                 </div>
                 { profileSettingsButtons }
             </form>

src/components/views/room_settings/UrlPreviewSettings.tsx

@@ -18,8 +18,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from "../../../index";
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import dis from "../../../dispatcher/dispatcher";
@@ -27,21 +25,22 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { Action } from "../../../dispatcher/actions";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Room } from "matrix-js-sdk/src/models/room";
+import SettingsFlag from "../elements/SettingsFlag";
+
+interface IProps {
+    room: Room;
+}
 
 @replaceableComponent("views.room_settings.UrlPreviewSettings")
-export default class UrlPreviewSettings extends React.Component {
-    static propTypes = {
-        room: PropTypes.object,
-    };
-
-    _onClickUserSettings = (e) => {
+export default class UrlPreviewSettings extends React.Component<IProps> {
+    private onClickUserSettings = (e: React.MouseEvent): void => {
         e.preventDefault();
         e.stopPropagation();
         dis.fire(Action.ViewUserSettings);
     };
 
-    render() {
-        const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
+    public render(): JSX.Element {
         const roomId = this.props.room.roomId;
         const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
@@ -54,18 +53,18 @@ export default class UrlPreviewSettings extends React.Component {
             if (accountEnabled) {
                 previewsForAccount = (
                     _t("You have <a>enabled</a> URL previews by default.", {}, {
-                        'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
+                        'a': (sub)=><a onClick={this.onClickUserSettings} href=''>{ sub }</a>,
                     })
                 );
             } else {
                 previewsForAccount = (
                     _t("You have <a>disabled</a> URL previews by default.", {}, {
-                        'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
+                        'a': (sub)=><a onClick={this.onClickUserSettings} href=''>{ sub }</a>,
                     })
                 );
             }
 
-            if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
+            if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, SettingLevel.ROOM)) {
                 previewsForRoom = (
                     <label>
                         <SettingsFlag

src/components/views/rooms/AppsDrawer.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Resizable } from "re-resizable";
 
@@ -26,8 +25,6 @@ import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
-import SettingsStore from "../../../settings/SettingsStore";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import ResizeHandle from "../elements/ResizeHandle";
 import Resizer from "../../../resizer/resizer";
@@ -37,60 +34,74 @@ import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
 import { useStateCallback } from "../../../hooks/useStateCallback";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { IApp } from "../../../stores/WidgetStore";
+import { ActionPayload } from "../../../dispatcher/payloads";
+
+interface IProps {
+    userId: string;
+    room: Room;
+    resizeNotifier: ResizeNotifier;
+    showApps?: boolean; // Should apps be rendered
+    maxHeight: number;
+}
+
+interface IState {
+    apps: IApp[];
+    resizingVertical: boolean; // true when changing the height of the apps drawer
+    resizingHorizontal: boolean; // true when chagning the distribution of the width between widgets
+    resizing: boolean;
+}
 
 @replaceableComponent("views.rooms.AppsDrawer")
-export default class AppsDrawer extends React.Component {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        room: PropTypes.object.isRequired,
-        resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
-        showApps: PropTypes.bool, // Should apps be rendered
-    };
-
-    static defaultProps = {
+export default class AppsDrawer extends React.Component<IProps, IState> {
+    private resizeContainer: HTMLDivElement;
+    private resizer: Resizer;
+    private dispatcherRef: string;
+    public static defaultProps: Partial<IProps> = {
         showApps: true,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
-            apps: this._getApps(),
-            resizingVertical: false, // true when changing the height of the apps drawer
-            resizingHorizontal: false, // true when chagning the distribution of the width between widgets
+            apps: this.getApps(),
+            resizingVertical: false,
+            resizingHorizontal: false,
+            resizing: false,
         };
 
-        this._resizeContainer = null;
-        this.resizer = this._createResizer();
+        this.resizer = this.createResizer();
 
         this.props.resizeNotifier.on("isResizing", this.onIsResizing);
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         ScalarMessaging.startListening();
-        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
+        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         ScalarMessaging.stopListening();
-        WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
+        WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
-        if (this._resizeContainer) {
+        if (this.resizeContainer) {
             this.resizer.detach();
         }
         this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
-    onIsResizing = (resizing) => {
+    private onIsResizing = (resizing: boolean): void => {
         // This one is the vertical, ie. change height of apps drawer
         this.setState({ resizingVertical: resizing });
         if (!resizing) {
-            this._relaxResizer();
+            this.relaxResizer();
         }
     };
 
-    _createResizer() {
+    private createResizer(): Resizer {
         // This is the horizontal one, changing the distribution of the width between the app tiles
         // (ie. a vertical resize handle because, the handle itself is vertical...)
         const classNames = {
@@ -100,11 +111,11 @@ export default class AppsDrawer extends React.Component {
         };
         const collapseConfig = {
             onResizeStart: () => {
-                this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+                this.resizeContainer.classList.add("mx_AppsDrawer_resizing");
                 this.setState({ resizingHorizontal: true });
             },
             onResizeStop: () => {
-                this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
+                this.resizeContainer.classList.remove("mx_AppsDrawer_resizing");
                 WidgetLayoutStore.instance.setResizerDistributions(
                     this.props.room, Container.Top,
                     this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
@@ -113,13 +124,13 @@ export default class AppsDrawer extends React.Component {
             },
         };
         // pass a truthy container for now, we won't call attach until we update it
-        const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
+        const resizer = new Resizer(null, PercentageDistributor, collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
     }
 
-    _collectResizer = (ref) => {
-        if (this._resizeContainer) {
+    private collectResizer = (ref: HTMLDivElement): void => {
+        if (this.resizeContainer) {
             this.resizer.detach();
         }
 
@@ -127,22 +138,22 @@ export default class AppsDrawer extends React.Component {
             this.resizer.container = ref;
             this.resizer.attach();
         }
-        this._resizeContainer = ref;
-        this._loadResizerPreferences();
+        this.resizeContainer = ref;
+        this.loadResizerPreferences();
     };
 
-    _getAppsHash = (apps) => apps.map(app => app.id).join("~");
+    private getAppsHash = (apps: IApp[]): string => apps.map(app => app.id).join("~");
 
-    componentDidUpdate(prevProps, prevState) {
+    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
         if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) {
             // Room has changed, update apps
-            this._updateApps();
-        } else if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
-            this._loadResizerPreferences();
+            this.updateApps();
+        } else if (this.getAppsHash(this.state.apps) !== this.getAppsHash(prevState.apps)) {
+            this.loadResizerPreferences();
         }
     }
 
-    _relaxResizer = () => {
+    private relaxResizer = (): void => {
         const distributors = this.resizer.getDistributors();
 
         // relax all items if they had any overconstrained flexboxes
@@ -150,7 +161,7 @@ export default class AppsDrawer extends React.Component {
         distributors.forEach(d => d.finish());
     };
 
-    _loadResizerPreferences = () => {
+    private loadResizerPreferences = (): void => {
         const distributions = WidgetLayoutStore.instance.getResizerDistributions(this.props.room, Container.Top);
         if (this.state.apps && (this.state.apps.length - 1) === distributions.length) {
             distributions.forEach((size, i) => {
@@ -168,11 +179,11 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    isResizing() {
+    private isResizing(): boolean {
         return this.state.resizingVertical || this.state.resizingHorizontal;
     }
 
-    onAction = (action) => {
+    private onAction = (action: ActionPayload): void => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
@@ -190,23 +201,15 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    _getApps = () => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
+    private getApps = (): IApp[] => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
 
-    _updateApps = () => {
+    private updateApps = (): void => {
         this.setState({
-            apps: this._getApps(),
+            apps: this.getApps(),
         });
     };
 
-    _launchManageIntegrations() {
-        if (SettingsStore.getValue("feature_many_integration_managers")) {
-            IntegrationManagers.sharedInstance().openAll();
-        } else {
-            IntegrationManagers.sharedInstance().getPrimaryManager().open(this.props.room, 'add_integ');
-        }
-    }
-
-    render() {
+    public render(): JSX.Element {
         if (!this.props.showApps) return <div />;
 
         const apps = this.state.apps.map((app, index, arr) => {
@@ -257,7 +260,7 @@ export default class AppsDrawer extends React.Component {
                     className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >
-                    <div className="mx_AppsContainer" ref={this._collectResizer}>
+                    <div className="mx_AppsContainer" ref={this.collectResizer}>
                         { apps.map((app, i) => {
                             if (i < 1) return app;
                             return <React.Fragment key={app.key}>
@@ -273,7 +276,18 @@ export default class AppsDrawer extends React.Component {
     }
 }
 
-const PersistentVResizer = ({
+interface IPersistentResizerProps {
+    room: Room;
+    minHeight: number;
+    maxHeight: number;
+    className: string;
+    handleWrapperClass: string;
+    handleClass: string;
+    resizeNotifier: ResizeNotifier;
+    children: React.ReactNode;
+}
+
+const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
     room,
     minHeight,
     maxHeight,
@@ -303,7 +317,7 @@ const PersistentVResizer = ({
     });
 
     return <Resizable
-        size={{ height: Math.min(height, maxHeight) }}
+        size={{ height: Math.min(height, maxHeight), width: null }}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {

src/components/views/rooms/BasicMessageComposer.tsx

@@ -50,7 +50,8 @@ import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
-const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
+const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
+export const REGEX_EMOTICON = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')$');
 
 const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
 
@@ -161,7 +162,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     }
 
-    private replaceEmoticon = (caretPosition: DocumentPosition): number => {
+    public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number {
         const { model } = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 8 characters backwards from caretPosition,
@@ -170,9 +171,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         range.expandBackwardsWhile((index, offset) => {
             const part = model.parts[index];
             n -= 1;
-            return n >= 0 && (part.type === Type.Plain || part.type === Type.PillCandidate);
+            return n >= 0 && [Type.Plain, Type.PillCandidate, Type.Newline].includes(part.type);
         });
-        const emoticonMatch = REGEX_EMOTICON_WHITESPACE.exec(range.text);
+        const emoticonMatch = regex.exec(range.text);
         if (emoticonMatch) {
             const query = emoticonMatch[1].replace("-", "");
             // try both exact match and lower-case, this means that xd won't match xD but :P will match :p
@@ -180,18 +181,25 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
             if (data) {
                 const { partCreator } = model;
-                const hasPrecedingSpace = emoticonMatch[0][0] === " ";
+                const firstMatch = emoticonMatch[0];
+                const moveStart = firstMatch[0] === " " ? 1 : 0;
+
                 // we need the range to only comprise of the emoticon
                 // because we'll replace the whole range with an emoji,
                 // so move the start forward to the start of the emoticon.
                 // Take + 1 because index is reported without the possible preceding space.
-                range.moveStart(emoticonMatch.index + (hasPrecedingSpace ? 1 : 0));
+                range.moveStartForwards(emoticonMatch.index + moveStart);
+                // If the end is a trailing space/newline move end backwards, so that we don't replace it
+                if (["\n", " "].includes(firstMatch[firstMatch.length - 1])) {
+                    range.moveEndBackwards(1);
+                }
+
                 // this returns the amount of added/removed characters during the replace
                 // so the caret position can be adjusted.
-                return range.replace([partCreator.plain(data.unicode + " ")]);
+                return range.replace([partCreator.plain(data.unicode)]);
             }
         }
-    };
+    }
 
     private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff): void => {
         renderModel(this.editorRef.current, this.props.model);
@@ -607,8 +615,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     };
 
     private configureEmoticonAutoReplace = (): void => {
-        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
-        this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
+        this.props.model.setTransformCallback(this.transform);
     };
 
     private configureShouldShowPillAvatar = (): void => {
@@ -621,6 +628,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.setState({ surroundWith });
     };
 
+    private transform = (documentPosition: DocumentPosition): void => {
+        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
+        if (shouldReplace) this.replaceEmoticon(documentPosition, REGEX_EMOTICON_WHITESPACE);
+    };
+
     componentWillUnmount() {
         document.removeEventListener("selectionchange", this.onSelectionChange);
         this.editorRef.current.removeEventListener("input", this.onInput, true);

src/components/views/rooms/E2EIcon.tsx

@@ -16,41 +16,51 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import classNames from 'classnames';
 
 import { _t, _td } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
+import { E2EStatus } from "../../../utils/ShieldUtils";
 
-export const E2E_STATE = {
-    VERIFIED: "verified",
-    WARNING: "warning",
-    UNKNOWN: "unknown",
-    NORMAL: "normal",
-    UNAUTHENTICATED: "unauthenticated",
+export enum E2EState {
+    Verified = "verified",
+    Warning = "warning",
+    Unknown = "unknown",
+    Normal = "normal",
+    Unauthenticated = "unauthenticated",
+}
+
+const crossSigningUserTitles: { [key in E2EState]?: string } = {
+    [E2EState.Warning]: _td("This user has not verified all of their sessions."),
+    [E2EState.Normal]: _td("You have not verified this user."),
+    [E2EState.Verified]: _td("You have verified this user. This user has verified all of their sessions."),
+};
+const crossSigningRoomTitles: { [key in E2EState]?: string } = {
+    [E2EState.Warning]: _td("Someone is using an unknown session"),
+    [E2EState.Normal]: _td("This room is end-to-end encrypted"),
+    [E2EState.Verified]: _td("Everyone in this room is verified"),
 };
 
-const crossSigningUserTitles = {
-    [E2E_STATE.WARNING]: _td("This user has not verified all of their sessions."),
-    [E2E_STATE.NORMAL]: _td("You have not verified this user."),
-    [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their sessions."),
-};
-const crossSigningRoomTitles = {
-    [E2E_STATE.WARNING]: _td("Someone is using an unknown session"),
-    [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
-    [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
-};
+interface IProps {
+    isUser?: boolean;
+    status?: E2EState | E2EStatus;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+    hideTooltip?: boolean;
+    bordered?: boolean;
+}
 
-const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
+const E2EIcon: React.FC<IProps> = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
         mx_E2EIcon: true,
         mx_E2EIcon_bordered: bordered,
-        mx_E2EIcon_warning: status === E2E_STATE.WARNING,
-        mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
-        mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+        mx_E2EIcon_warning: status === E2EState.Warning,
+        mx_E2EIcon_normal: status === E2EState.Normal,
+        mx_E2EIcon_verified: status === E2EState.Verified,
     }, className);
 
     let e2eTitle;
@@ -92,12 +102,4 @@ const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, border
     </div>;
 };
 
-E2EIcon.propTypes = {
-    isUser: PropTypes.bool,
-    status: PropTypes.oneOf(Object.values(E2E_STATE)),
-    className: PropTypes.string,
-    size: PropTypes.number,
-    onClick: PropTypes.func,
-};
-
 export default E2EIcon;

src/components/views/rooms/EditMessageComposer.tsx

@@ -27,7 +27,7 @@ import { findEditableEvent } from '../../../utils/EventUtils';
 import { parseEvent } from '../../../editor/deserialize';
 import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import BasicMessageComposer from "./BasicMessageComposer";
+import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import { Action } from "../../../dispatcher/actions";
@@ -42,11 +42,9 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import AccessibleButton from '../elements/AccessibleButton';
+import SettingsStore from "../../../settings/SettingsStore";
 
-function eventIsReply(mxEvent: MatrixEvent): boolean {
-    const relatesTo = mxEvent.getContent()["m.relates_to"];
-    return !!(relatesTo && relatesTo["m.in_reply_to"]);
-}
+import { logger } from "matrix-js-sdk/src/logger";
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -72,7 +70,7 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
     if (isEmote) {
         model = stripEmoteCommand(model);
     }
-    const isReply = eventIsReply(editedEvent);
+    const isReply = !!editedEvent.replyEventId;
     let plainPrefix = "";
     let htmlPrefix = "";
 
@@ -312,7 +310,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
                 description: errText,
             });
         } else {
-            console.log("Command success.");
+            logger.log("Command success.");
             if (messageContent) return messageContent;
         }
     }
@@ -320,6 +318,14 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     private sendEdit = async (): Promise<void> => {
         const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
+
+        // Replace emoticon at the end of the message
+        if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
+            const caret = this.editorRef.current?.getCaret();
+            const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
+            this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
+        }
+
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
 

src/components/views/rooms/EntityTile.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _td } from '../../../languageHandler';
 import classNames from "classnames";
-import E2EIcon from './E2EIcon';
+import E2EIcon, { E2EState } from './E2EIcon';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseAvatar from '../avatars/BaseAvatar';
 import PresenceLabel from "./PresenceLabel";
@@ -75,7 +75,7 @@ interface IProps {
     suppressOnHover?: boolean;
     showPresence?: boolean;
     subtextLabel?: string;
-    e2eStatus?: string;
+    e2eStatus?: E2EState;
     powerStatus?: PowerStatus;
 }
 

src/components/views/rooms/EventTile.tsx

@@ -21,6 +21,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
@@ -32,7 +33,7 @@ import { formatTime } from "../../../DateUtils";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { ALL_RULE_TYPES } from "../../../mjolnir/BanList";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { E2E_STATE } from "./E2EIcon";
+import { E2EState } from "./E2EIcon";
 import { toRem } from "../../../utils/units";
 import { WidgetType } from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -55,6 +56,8 @@ import ReadReceiptMarker from "./ReadReceiptMarker";
 import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -240,6 +243,7 @@ interface IProps {
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations. Should be an empty object when the room
     // first loads
+    // TODO: Proper typing for RR info
     readReceiptMap?: any;
 
     // A function which is used to check if the parent panel is being
@@ -301,6 +305,9 @@ interface IProps {
 
     // whether or not to display the sender
     hideSender?: boolean;
+
+    // whether or not to display thread info
+    showThreadInfo?: boolean;
 }
 
 interface IState {
@@ -317,6 +324,8 @@ interface IState {
     reactions: Relations;
 
     hover: boolean;
+
+    thread?: Thread;
 }
 
 @replaceableComponent("views.rooms.EventTile")
@@ -354,6 +363,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             reactions: this.getReactions(),
 
             hover: false,
+
+            thread: this.props.mxEvent?.getThread(),
         };
 
         // don't do RR animations until we are mounted
@@ -456,8 +467,20 @@ export default class EventTile extends React.Component<IProps, IState> {
                 this.isListeningForReceipts = true;
             }
         }
+
+        if (SettingsStore.getValue("feature_thread")) {
+            this.props.mxEvent.once(ThreadEvent.Ready, this.updateThread);
+            this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
+        }
     }
 
+    private updateThread = (thread) => {
+        this.setState({
+            thread,
+        });
+        this.forceUpdate();
+    };
+
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -468,7 +491,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
         if (objectHasDiff(this.state, nextState)) {
             return true;
         }
@@ -496,6 +519,43 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
+    private renderThreadInfo(): React.ReactNode {
+        if (!SettingsStore.getValue("feature_thread")) {
+            return null;
+        }
+
+        const thread = this.state.thread;
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        if (!thread || this.props.showThreadInfo === false || thread.length <= 1) {
+            return null;
+        }
+
+        const avatars = Array.from(thread.participants).map((mxId: string) => {
+            const member = room.getMember(mxId);
+            return <MemberAvatar key={member.userId} member={member} width={14} height={14} />;
+        });
+
+        return (
+            <div
+                className="mx_ThreadInfo"
+                onClick={() => {
+                    dis.dispatch({
+                        action: Action.SetRightPanelPhase,
+                        phase: RightPanelPhases.ThreadView,
+                        refireParams: {
+                            event: this.props.mxEvent,
+                        },
+                    });
+                }}
+            >
+                <span className="mx_EventListSummary_avatars">
+                    { avatars }
+                </span>
+                { thread.length - 1 } { thread.length === 2 ? 'reply' : 'replies' }
+            </div>
+        );
+    }
+
     private onRoomReceipt = (ev, room) => {
         // ignore events for other rooms
         const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
@@ -550,7 +610,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         if (encryptionInfo.mismatchedSender) {
             // something definitely wrong is going on here
             this.setState({
-                verified: E2E_STATE.WARNING,
+                verified: E2EState.Warning,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
@@ -558,7 +618,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         if (!userTrust.isCrossSigningVerified()) {
             // user is not verified, so default to everything is normal
             this.setState({
-                verified: E2E_STATE.NORMAL,
+                verified: E2EState.Normal,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
@@ -568,27 +628,27 @@ export default class EventTile extends React.Component<IProps, IState> {
         );
         if (!eventSenderTrust) {
             this.setState({
-                verified: E2E_STATE.UNKNOWN,
+                verified: E2EState.Unknown,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         if (!eventSenderTrust.isVerified()) {
             this.setState({
-                verified: E2E_STATE.WARNING,
+                verified: E2EState.Warning,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         if (!encryptionInfo.authenticated) {
             this.setState({
-                verified: E2E_STATE.UNAUTHENTICATED,
+                verified: E2EState.Unauthenticated,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         this.setState({
-            verified: E2E_STATE.VERIFIED,
+            verified: E2EState.Verified,
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
@@ -796,13 +856,13 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // event is encrypted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted()) {
-            if (this.state.verified === E2E_STATE.NORMAL) {
+            if (this.state.verified === E2EState.Normal) {
                 return; // no icon if we've not even cross-signed the user
-            } else if (this.state.verified === E2E_STATE.VERIFIED) {
+            } else if (this.state.verified === E2EState.Verified) {
                 return; // no icon for verified
-            } else if (this.state.verified === E2E_STATE.UNAUTHENTICATED) {
+            } else if (this.state.verified === E2EState.Unauthenticated) {
                 return (<E2ePadlockUnauthenticated />);
-            } else if (this.state.verified === E2E_STATE.UNKNOWN) {
+            } else if (this.state.verified === E2EState.Unknown) {
                 return (<E2ePadlockUnknown />);
             } else {
                 return (<E2ePadlockUnverified />);
@@ -907,9 +967,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             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,
-            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2E_STATE.WARNING,
-            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
+            mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2EState.Verified,
+            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2EState.Warning,
+            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2EState.Unknown,
             mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_noSender: this.props.hideSender,
@@ -1139,15 +1199,20 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
 
             default: {
-                const thread = ReplyThread.makeThread(
-                    this.props.mxEvent,
-                    this.props.onHeightChanged,
-                    this.props.permalinkCreator,
-                    this.replyThread,
-                    this.props.layout,
-                    this.props.forExport,
-                    this.props.alwaysShowTimestamps || this.state.hover,
-                );
+                let thread;
+                // When the "showHiddenEventsInTimeline" lab is enabled,
+                // avoid showing replies for hidden events (events without tiles)
+                if (haveTileForEvent(this.props.mxEvent)) {
+                    thread = ReplyThread.makeThread(
+                        this.props.mxEvent,
+                        this.props.onHeightChanged,
+                        this.props.permalinkCreator,
+                        this.replyThread,
+                        this.props.layout,
+                        this.props.forExport,
+                        this.props.alwaysShowTimestamps || this.state.hover,
+                    );
+                }
 
                 const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId();
 
@@ -1189,6 +1254,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { keyRequestInfo }
                             { actionBar }
                             { this.props.layout === Layout.IRC && (reactionsRow) }
+                            { this.renderThreadInfo() }
                         </div>
                         { this.props.layout !== Layout.IRC && (reactionsRow) }
                         { msgOption }