Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into spaces-jump-to-room

src/components/structures/AutoHideScrollbar.js

@@ -1,51 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-
-export default class AutoHideScrollbar extends React.Component {
-    constructor(props) {
-        super(props);
-        this._collectContainerRef = this._collectContainerRef.bind(this);
-    }
-
-    _collectContainerRef(ref) {
-        if (ref && !this.containerRef) {
-            this.containerRef = ref;
-        }
-        if (this.props.wrappedRef) {
-            this.props.wrappedRef(ref);
-        }
-    }
-
-    getScrollTop() {
-        return this.containerRef.scrollTop;
-    }
-
-    render() {
-        return (<div
-            ref={this._collectContainerRef}
-            style={this.props.style}
-            className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
-            onScroll={this.props.onScroll}
-            onWheel={this.props.onWheel}
-            tabIndex={this.props.tabIndex}
-        >
-            { this.props.children }
-        </div>);
-    }
-}

src/components/structures/AutoHideScrollbar.tsx

@@ -0,0 +1,69 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+
+interface IProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    onScroll?: () => void;
+    onWheel?: () => void;
+    style?: React.CSSProperties
+    tabIndex?: number,
+    wrappedRef?: (ref: HTMLDivElement) => void;
+}
+
+export default class AutoHideScrollbar extends React.Component<IProps> {
+    private containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    public componentDidMount() {
+        if (this.containerRef.current && this.props.onScroll) {
+            // Using the passive option to not block the main thread
+            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+            this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
+        }
+
+        if (this.props.wrappedRef) {
+            this.props.wrappedRef(this.containerRef.current);
+        }
+    }
+
+    public componentWillUnmount() {
+        if (this.containerRef.current && this.props.onScroll) {
+            this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
+        }
+    }
+
+    public getScrollTop(): number {
+        return this.containerRef.current.scrollTop;
+    }
+
+    public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
+
+        return (<div
+            {...otherProps}
+            ref={this.containerRef}
+            style={style}
+            className={["mx_AutoHideScrollbar", className].join(" ")}
+            onWheel={onWheel}
+            tabIndex={tabIndex}
+        >
+            { children }
+        </div>);
+    }
+}

src/components/structures/ContextMenu.tsx

@@ -23,6 +23,7 @@ import classNames from "classnames";
 import {Key} from "../../Keyboard";
 import {Writeable} from "../../@types/common";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import UIStore from "../../stores/UIStore";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -222,10 +223,12 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
     };
 
     private onKeyDown = (ev: React.KeyboardEvent) => {
+        // don't let keyboard handling escape the context menu
+        ev.stopPropagation();
+
         if (!this.props.managed) {
             if (ev.key === Key.ESCAPE) {
                 this.props.onFinished();
-                ev.stopPropagation();
                 ev.preventDefault();
             }
             return;
@@ -258,7 +261,6 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
 
         if (handled) {
             // consume all other keys in context menu
-            ev.stopPropagation();
             ev.preventDefault();
         }
     };
@@ -409,12 +411,12 @@ export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None
     const buttonBottom = elementRect.bottom + window.pageYOffset;
     const buttonTop = elementRect.top + window.pageYOffset;
     // Align the right edge of the menu to the right edge of the button
-    menuOptions.right = window.innerWidth - buttonRight;
+    menuOptions.right = UIStore.instance.windowWidth - buttonRight;
     // Align the menu vertically on whichever side of the button has more space available.
-    if (buttonBottom < window.innerHeight / 2) {
+    if (buttonBottom < UIStore.instance.windowHeight / 2) {
         menuOptions.top = buttonBottom + vPadding;
     } else {
-        menuOptions.bottom = (window.innerHeight - buttonTop) + vPadding;
+        menuOptions.bottom = (UIStore.instance.windowHeight - buttonTop) + vPadding;
     }
 
     return menuOptions;
@@ -429,12 +431,12 @@ export const alwaysAboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFac
     const buttonBottom = elementRect.bottom + window.pageYOffset;
     const buttonTop = elementRect.top + window.pageYOffset;
     // Align the right edge of the menu to the right edge of the button
-    menuOptions.right = window.innerWidth - buttonRight;
+    menuOptions.right = UIStore.instance.windowWidth - buttonRight;
     // Align the menu vertically on whichever side of the button has more space available.
-    if (buttonBottom < window.innerHeight / 2) {
+    if (buttonBottom < UIStore.instance.windowHeight / 2) {
         menuOptions.top = buttonBottom + vPadding;
     } else {
-        menuOptions.bottom = (window.innerHeight - buttonTop) + vPadding;
+        menuOptions.bottom = (UIStore.instance.windowHeight - buttonTop) + vPadding;
     }
 
     return menuOptions;
@@ -450,7 +452,7 @@ export const alwaysAboveRightOf = (elementRect: DOMRect, chevronFace = ChevronFa
     // Align the left edge of the menu to the left edge of the button
     menuOptions.left = buttonLeft;
     // Align the menu vertically above the menu
-    menuOptions.bottom = (window.innerHeight - buttonTop) + vPadding;
+    menuOptions.bottom = (UIStore.instance.windowHeight - buttonTop) + vPadding;
 
     return menuOptions;
 };

src/components/structures/FilePanel.js

@@ -50,6 +50,9 @@ class FilePanel extends React.Component {
         if (room?.roomId !== this.props?.roomId) return;
         if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
 
+        const client = MatrixClientPeg.get();
+        client.decryptEventIfNeeded(ev);
+
         if (ev.isBeingDecrypted()) {
             this.decryptingEvents.add(ev.getId());
         } else {

src/components/structures/GroupFilterPanel.js

@@ -24,7 +24,6 @@ import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import { _t } from '../../languageHandler';
 
-import { Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
@@ -83,7 +82,7 @@ class GroupFilterPanel extends React.Component {
         }
     };
 
-    onMouseDown = e => {
+    onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({action: 'deselect_tags'});
@@ -123,12 +122,19 @@ class GroupFilterPanel extends React.Component {
             mx_GroupFilterPanel_items_selected: itemsSelected,
         });
 
+        let betaDot;
+        if (SettingsStore.getBetaInfo("feature_spaces") && !localStorage.getItem("mx_seenSpacesBeta")) {
+            betaDot = <div className="mx_BetaDot" />;
+        }
+
         let createButton = (
             <ActionButton
                 tooltip
                 label={_t("Communities")}
                 action="toggle_my_groups"
-                className="mx_TagTile mx_TagTile_plus" />
+                className="mx_TagTile mx_TagTile_plus">
+                { betaDot }
+            </ActionButton>
         );
 
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
@@ -144,28 +150,15 @@ class GroupFilterPanel extends React.Component {
         return <div className={classes} onClick={this.onClearFilterClick}>
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
-                // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
-                // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6253
-                onMouseDown={this.onMouseDown}
+                onClick={this.onClick}
             >
-                <Droppable
-                    droppableId="tag-panel-droppable"
-                    type="draggable-TagTile"
-                >
-                    { (provided, snapshot) => (
-                        <div
-                            className="mx_GroupFilterPanel_tagTileContainer"
-                            ref={provided.innerRef}
-                        >
-                            { this.renderGlobalIcon() }
-                            { tags }
-                            <div>
-                                {createButton}
-                            </div>
-                            { provided.placeholder }
-                        </div>
-                    ) }
-                </Droppable>
+                <div className="mx_GroupFilterPanel_tagTileContainer">
+                    { this.renderGlobalIcon() }
+                    { tags }
+                    <div>
+                        { createButton }
+                    </div>
+                </div>
             </AutoHideScrollbar>
         </div>;
     }

src/components/structures/GroupView.js

@@ -36,7 +36,7 @@ import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Permalinks";
 import {Group} from "matrix-js-sdk/src/models/group";
-import {allSettled, sleep} from "../../utils/promise";
+import {sleep} from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import {mediaFromMxc} from "../../customisations/Media";
@@ -99,7 +99,7 @@ class CategoryRoomList extends React.Component {
             onFinished: (success, addrs) => {
                 if (!success) return;
                 const errorList = [];
-                allSettled(addrs.map((addr) => {
+                Promise.allSettled(addrs.map((addr) => {
                     return GroupStore
                         .addRoomToGroupSummary(this.props.groupId, addr.address)
                         .catch(() => { errorList.push(addr.address); });
@@ -274,7 +274,7 @@ class RoleUserList extends React.Component {
             onFinished: (success, addrs) => {
                 if (!success) return;
                 const errorList = [];
-                allSettled(addrs.map((addr) => {
+                Promise.allSettled(addrs.map((addr) => {
                     return GroupStore
                         .addUserToGroupSummary(addr.address)
                         .catch(() => { errorList.push(addr.address); });

src/components/structures/HostSignupAction.tsx

@@ -24,13 +24,16 @@ import { HostSignupStore } from "../../stores/HostSignupStore";
 import SdkConfig from "../../SdkConfig";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 
-interface IProps {}
+interface IProps {
+    onClick?(): void;
+}
 
 interface IState {}
 
 @replaceableComponent("structures.HostSignupAction")
 export default class HostSignupAction extends React.PureComponent<IProps, IState> {
     private openDialog = async () => {
+        this.props.onClick?.();
         await HostSignupStore.instance.setHostSignupActive(true);
     }
 

src/components/structures/IndicatorScrollbar.js

@@ -59,7 +59,9 @@ export default class IndicatorScrollbar extends React.Component {
     _collectScroller(scroller) {
         if (scroller && !this._scrollElement) {
             this._scrollElement = scroller;
-            this._scrollElement.addEventListener("scroll", this.checkOverflow);
+            // Using the passive option to not block the main thread
+            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+            this._scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true });
             this.checkOverflow();
         }
     }
@@ -183,21 +185,24 @@ export default class IndicatorScrollbar extends React.Component {
     };
 
     render() {
+        // eslint-disable-next-line no-unused-vars
+        const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
+
         const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
         const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
-        const leftOverflowIndicator = this.props.trackHorizontalOverflow
+        const leftOverflowIndicator = trackHorizontalOverflow
             ? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
-        const rightOverflowIndicator = this.props.trackHorizontalOverflow
+        const rightOverflowIndicator = trackHorizontalOverflow
             ? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
 
         return (<AutoHideScrollbar
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
             onWheel={this.onMouseWheel}
-            {...this.props}
+            {...otherProps}
         >
             { leftOverflowIndicator }
-            { this.props.children }
+            { children }
             { rightOverflowIndicator }
         </AutoHideScrollbar>);
     }

src/components/structures/LeftPanel.tsx

@@ -24,6 +24,7 @@ import CustomRoomTagPanel from "./CustomRoomTagPanel";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import RoomList from "../views/rooms/RoomList";
+import CallHandler from "../../CallHandler";
 import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import UserMenu from "./UserMenu";
@@ -43,6 +44,7 @@ import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
+import UIStore from "../../stores/UIStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -66,6 +68,7 @@ const cssClasses = [
 
 @replaceableComponent("structures.LeftPanel")
 export default class LeftPanel extends React.Component<IProps, IState> {
+    private ref: React.RefObject<HTMLDivElement> = createRef();
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private groupFilterPanelWatcherRef: string;
     private bgImageWatcherRef: string;
@@ -90,10 +93,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
+    }
 
-        // We watch the middle panel because we don't actually get resized, the middle panel does.
-        // We listen to the noisy channel to avoid choppy reaction times.
-        this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
+    public componentDidMount() {
+        UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
+        UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
+        // Using the passive option to not block the main thread
+        // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+        this.listContainerRef.current?.addEventListener("scroll", this.onScroll, { passive: true });
     }
 
     public componentWillUnmount() {
@@ -103,17 +110,34 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
+        UIStore.instance.stopTrackingElementDimensions("ListContainer");
+        UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
+        this.listContainerRef.current?.removeEventListener("scroll", this.onScroll);
+    }
+
+    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
+        if (prevState.activeSpace !== this.state.activeSpace) {
+            this.refreshStickyHeaders();
+        }
     }
 
     private updateActiveSpace = (activeSpace: Room) => {
         this.setState({ activeSpace });
     };
 
+    private onDialPad = () => {
+        dis.fire(Action.OpenDialPad);
+    }
+
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
     };
 
+    private refreshStickyHeaders = () => {
+        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
+        this.handleStickyHeaders(this.listContainerRef.current);
+    }
+
     private onBreadcrumbsUpdate = () => {
         const newVal = BreadcrumbsStore.instance.visible;
         if (newVal !== this.state.showBreadcrumbs) {
@@ -156,9 +180,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         const bottomEdge = list.offsetHeight + list.scrollTop;
         const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist:not(.mx_RoomSublist_hidden)");
 
-        const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
-        const headerStickyWidth = list.clientWidth - headerRightMargin;
-
         // We track which styles we want on a target before making the changes to avoid
         // excessive layout updates.
         const targetStyles = new Map<HTMLDivElement, {
@@ -228,7 +249,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
                 }
 
-                const offset = window.innerHeight - (list.parentElement.offsetTop + list.parentElement.offsetHeight);
+                const offset = UIStore.instance.windowHeight -
+                    (list.parentElement.offsetTop + list.parentElement.offsetHeight);
                 const newBottom = `${offset}px`;
                 if (header.style.bottom !== newBottom) {
                     header.style.bottom = newBottom;
@@ -247,14 +269,20 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     header.classList.add("mx_RoomSublist_headerContainer_sticky");
                 }
 
-                const newWidth = `${headerStickyWidth}px`;
-                if (header.style.width !== newWidth) {
-                    header.style.width = newWidth;
+                const listDimensions = UIStore.instance.getElementDimensions("ListContainer");
+                if (listDimensions) {
+                    const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
+                    const headerStickyWidth = listDimensions.width - headerRightMargin;
+                    const newWidth = `${headerStickyWidth}px`;
+                    if (header.style.width !== newWidth) {
+                        header.style.width = newWidth;
+                    }
                 }
             } else if (!style.stickyTop && !style.stickyBottom) {
                 if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
                     header.classList.remove("mx_RoomSublist_headerContainer_sticky");
                 }
+
                 if (header.style.width) {
                     header.style.removeProperty('width');
                 }
@@ -276,16 +304,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     }
 
-    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
+    private onScroll = (ev: Event) => {
         const list = ev.target as HTMLDivElement;
         this.handleStickyHeaders(list);
     };
 
-    private onResize = () => {
-        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
-        this.handleStickyHeaders(this.listContainerRef.current);
-    };
-
     private onFocus = (ev: React.FocusEvent) => {
         this.focusedElement = ev.target;
     };
@@ -379,7 +402,20 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     }
 
-    private renderSearchExplore(): React.ReactNode {
+    private renderSearchDialExplore(): React.ReactNode {
+        let dialPadButton = null;
+
+        // If we have dialer support, show a button to bring up the dial pad
+        // to start a new call
+        if (CallHandler.sharedInstance().getSupportsPstnProtocol()) {
+            dialPadButton =
+                <AccessibleTooltipButton
+                    className={classNames("mx_LeftPanel_dialPadButton", {})}
+                    onClick={this.onDialPad}
+                    title={_t("Open dial pad")}
+                />;
+        }
+
         return (
             <div
                 className="mx_LeftPanel_filterContainer"
@@ -392,6 +428,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     onKeyDown={this.onKeyDown}
                     onSelectRoom={this.selectRoom}
                 />
+
+                {dialPadButton}
+
                 <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_exploreButton", {
                         mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
@@ -420,8 +459,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
-            onResize={this.onResize}
             activeSpace={this.state.activeSpace}
+            onResize={this.refreshStickyHeaders}
+            onListCollapse={this.refreshStickyHeaders}
         />;
 
         const containerClasses = classNames({
@@ -435,17 +475,16 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         );
 
         return (
-            <div className={containerClasses}>
+            <div className={containerClasses} ref={this.ref}>
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
-                    {this.renderSearchExplore()}
+                    {this.renderSearchDialExplore()}
                     {this.renderBreadcrumbs()}
-                    <RoomListNumResults />
+                    <RoomListNumResults onVisibilityChange={this.refreshStickyHeaders} />
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}
-                            onScroll={this.onScroll}
                             ref={this.listContainerRef}
                             // Firefox sometimes makes this element focusable due to
                             // overflow:scroll;, so force it out of tab order.
@@ -454,7 +493,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             {roomList}
                         </div>
                     </div>
-                    { !this.props.isMinimized && <LeftPanelWidget onResize={this.onResize} /> }
+                    { !this.props.isMinimized && <LeftPanelWidget /> }
                 </aside>
             </div>
         );

src/components/structures/LeftPanelWidget.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useEffect, useMemo} from "react";
+import React, {useContext, useMemo} from "react";
 import {Resizable} from "re-resizable";
 import classNames from "classnames";
 
@@ -27,16 +27,13 @@ import WidgetUtils, {IWidgetEvent} from "../../utils/WidgetUtils";
 import {useAccountData} from "../../hooks/useAccountData";
 import AppTile from "../views/elements/AppTile";
 import {useSettingValue} from "../../hooks/useSettings";
-
-interface IProps {
-    onResize(): void;
-}
+import UIStore from "../../stores/UIStore";
 
 const MIN_HEIGHT = 100;
 const MAX_HEIGHT = 500; // or 50% of the window height
 const INITIAL_HEIGHT = 280;
 
-const LeftPanelWidget: React.FC<IProps> = ({ onResize }) => {
+const LeftPanelWidget: React.FC = () => {
     const cli = useContext(MatrixClientContext);
 
     const mWidgetsEvent = useAccountData<Record<string, IWidgetEvent>>(cli, "m.widgets");
@@ -56,7 +53,6 @@ const LeftPanelWidget: React.FC<IProps> = ({ onResize }) => {
 
     const [height, setHeight] = useLocalStorageState("left-panel-widget-height", INITIAL_HEIGHT);
     const [expanded, setExpanded] = useLocalStorageState("left-panel-widget-expanded", true);
-    useEffect(onResize, [expanded, onResize]);
 
     const [onFocus, isActive, ref] = useRovingTabIndex();
     const tabIndex = isActive ? 0 : -1;
@@ -68,8 +64,7 @@ const LeftPanelWidget: React.FC<IProps> = ({ onResize }) => {
         content = <Resizable
             size={{height} as any}
             minHeight={MIN_HEIGHT}
-            maxHeight={Math.min(window.innerHeight / 2, MAX_HEIGHT)}
-            onResize={onResize}
+            maxHeight={Math.min(UIStore.instance.windowHeight / 2, MAX_HEIGHT)}
             onResizeStop={(e, dir, ref, d) => {
                 setHeight(height + d.height);
             }}

src/components/structures/LoggedInView.tsx

@@ -19,19 +19,16 @@ limitations under the License.
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { DragDropContext } from 'react-beautiful-dnd';
 
 import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
-import CallMediaHandler from '../../CallMediaHandler';
+import MediaDeviceHandler from '../../MediaDeviceHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
-import {MatrixClientPeg, IMatrixClientCreds} from '../../MatrixClientPeg';
+import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
-import TagOrderActions from '../../actions/TagOrderActions';
-import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
 import {Resizer, CollapseDistributor} from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -170,7 +167,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
 
-        CallMediaHandler.loadDevices();
+        MediaDeviceHandler.loadDevices();
 
         fixupColorFonts();
 
@@ -219,16 +216,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         });
     };
 
-    // Child components assume that the client peg will not be null, so give them some
-    // sort of assurance here by only allowing a re-render if the client is truthy.
-    //
-    // This is required because `LoggedInView` maintains its own state and if this state
-    // updates after the client peg has been made null (during logout), then it will
-    // attempt to re-render and the children will throw errors.
-    shouldComponentUpdate() {
-        return Boolean(MatrixClientPeg.get());
-    }
-
     canResetTimelineInRoom = (roomId) => {
         if (!this._roomView.current) {
             return true;
@@ -368,7 +355,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
             const pinnedEventIds = pinStateEvent.getContent().pinned.slice(0, MAX_PINNED_NOTICES_PER_ROOM);
             for (const eventId of pinnedEventIds) {
-                const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId, 0);
+                const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId);
                 const event = timeline.getEvents().find(ev => ev.getId() === eventId);
                 if (event) events.push(event);
             }
@@ -579,50 +566,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
     };
 
-    _onDragEnd = (result) => {
-        // Dragged to an invalid destination, not onto a droppable
-        if (!result.destination) {
-            return;
-        }
-
-        const dest = result.destination.droppableId;
-
-        if (dest === 'tag-panel-droppable') {
-            // Could be "GroupTile +groupId:domain"
-            const draggableId = result.draggableId.split(' ').pop();
-
-            // Dispatch synchronously so that the GroupFilterPanel receives an
-            // optimistic update from GroupFilterOrderStore before the previous
-            // state is shown.
-            dis.dispatch(TagOrderActions.moveTag(
-                this._matrixClient,
-                draggableId,
-                result.destination.index,
-            ), true);
-        } else if (dest.startsWith('room-sub-list-droppable_')) {
-            this._onRoomTileEndDrag(result);
-        }
-    };
-
-    _onRoomTileEndDrag = (result) => {
-        let newTag = result.destination.droppableId.split('_')[1];
-        let prevTag = result.source.droppableId.split('_')[1];
-        if (newTag === 'undefined') newTag = undefined;
-        if (prevTag === 'undefined') prevTag = undefined;
-
-        const roomId = result.draggableId.split('_')[1];
-
-        const oldIndex = result.source.index;
-        const newIndex = result.destination.index;
-
-        dis.dispatch(RoomListActions.tagRoom(
-            this._matrixClient,
-            this._matrixClient.getRoom(roomId),
-            prevTag, newTag,
-            oldIndex, newIndex,
-        ), true);
-    };
-
     render() {
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -689,17 +632,15 @@ class LoggedInView extends React.Component<IProps, IState> {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     <ToastContainer />
-                    <DragDropContext onDragEnd={this._onDragEnd}>
-                        <div ref={this._resizeContainer} className={bodyClasses}>
-                            { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
-                            <LeftPanel
-                                isMinimized={this.props.collapseLhs || false}
-                                resizeNotifier={this.props.resizeNotifier}
-                            />
-                            <ResizeHandle />
-                            { pageElement }
-                        </div>
-                    </DragDropContext>
+                    <div ref={this._resizeContainer} className={bodyClasses}>
+                        { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                        <LeftPanel
+                            isMinimized={this.props.collapseLhs || false}
+                            resizeNotifier={this.props.resizeNotifier}
+                        />
+                        <ResizeHandle />
+                        { pageElement }
+                    </div>
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />

src/components/structures/MatrixChat.tsx

@@ -48,7 +48,7 @@ import createRoom, {IOpts} from "../../createRoom";
 import {_t, _td, getCurrentLanguage} from '../../languageHandler';
 import SettingsStore from "../../settings/SettingsStore";
 import ThemeController from "../../settings/controllers/ThemeController";
-import { startAnyRegistrationFlow } from "../../Registration.js";
+import { startAnyRegistrationFlow } from "../../Registration";
 import { messageForSyncError } from '../../utils/ErrorUtils';
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils";
@@ -86,6 +86,9 @@ import {RoomUpdateCause} from "../../stores/room-list/models";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import SecurityCustomisations from "../../customisations/Security";
 
+import PerformanceMonitor, { PerformanceEntryNames } from "../../performance";
+import UIStore, { UI_EVENTS } from "../../stores/UIStore";
+
 /** constants for MatrixChat.state.view */
 export enum Views {
     // a special initial state which is only used at startup, while we are
@@ -223,13 +226,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     firstSyncPromise: IDeferred<void>;
 
     private screenAfterLogin?: IScreen;
-    private windowWidth: number;
     private pageChanging: boolean;
     private tokenLogin?: boolean;
     private accountPassword?: string;
     private accountPasswordTimer?: NodeJS.Timeout;
     private focusComposer: boolean;
     private subTitleStatus: string;
+    private prevWindowWidth: number;
 
     private readonly loggedInView: React.RefObject<LoggedInViewType>;
     private readonly dispatcherRef: any;
@@ -275,9 +278,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
         }
 
-        this.windowWidth = 10000;
-        this.handleResize();
-        window.addEventListener('resize', this.handleResize);
+        this.prevWindowWidth = UIStore.instance.windowWidth || 1000;
+        UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
 
         this.pageChanging = false;
 
@@ -376,7 +378,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             this.onLoggedIn();
         }
 
-        const promisesList = [this.firstSyncPromise.promise];
+        const promisesList: Promise<any>[] = [this.firstSyncPromise.promise];
         if (cryptoEnabled) {
             // wait for the client to finish downloading cross-signing keys for us so we
             // know whether or not we have keys set up on this account
@@ -434,7 +436,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         dis.unregister(this.dispatcherRef);
         this.themeWatcher.stop();
         this.fontWatcher.stop();
-        window.removeEventListener('resize', this.handleResize);
+        UIStore.destroy();
         this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
 
         if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
@@ -484,42 +486,22 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     startPageChangeTimer() {
-        // Tor doesn't support performance
-        if (!performance || !performance.mark) return null;
-
-        // This shouldn't happen because UNSAFE_componentWillUpdate and componentDidUpdate
-        // are used.
-        if (this.pageChanging) {
-            console.warn('MatrixChat.startPageChangeTimer: timer already started');
-            return;
-        }
-        this.pageChanging = true;
-        performance.mark('element_MatrixChat_page_change_start');
+        PerformanceMonitor.instance.start(PerformanceEntryNames.PAGE_CHANGE);
     }
 
     stopPageChangeTimer() {
-        // Tor doesn't support performance
-        if (!performance || !performance.mark) return null;
+        const perfMonitor = PerformanceMonitor.instance;
 
-        if (!this.pageChanging) {
-            console.warn('MatrixChat.stopPageChangeTimer: timer not started');
-            return;
-        }
-        this.pageChanging = false;
-        performance.mark('element_MatrixChat_page_change_stop');
-        performance.measure(
-            'element_MatrixChat_page_change_delta',
-            'element_MatrixChat_page_change_start',
-            'element_MatrixChat_page_change_stop',
-        );
-        performance.clearMarks('element_MatrixChat_page_change_start');
-        performance.clearMarks('element_MatrixChat_page_change_stop');
-        const measurement = performance.getEntriesByName('element_MatrixChat_page_change_delta').pop();
+        perfMonitor.stop(PerformanceEntryNames.PAGE_CHANGE);
 
-        // In practice, sometimes the entries list is empty, so we get no measurement
-        if (!measurement) return null;
+        const entries = perfMonitor.getEntries({
+            name: PerformanceEntryNames.PAGE_CHANGE,
+        });
+        const measurement = entries.pop();
 
-        return measurement.duration;
+        return measurement
+            ? measurement.duration
+            : null;
     }
 
     shouldTrackPageChange(prevState: IState, state: IState) {
@@ -683,7 +665,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 break;
             }
             case 'view_create_room':
-                this.createRoom(payload.public);
+                this.createRoom(payload.public, payload.defaultName);
                 break;
             case 'view_create_group': {
                 let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
@@ -740,6 +722,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.showScreenAfterLogin();
                 break;
             case 'toggle_my_groups':
+                // persist that the user has interacted with this, use it to dismiss the beta dot
+                localStorage.setItem("mx_seenSpacesBeta", "1");
                 // We just dispatch the page change rather than have to worry about
                 // what the logic is for each of these branches.
                 if (this.state.page_type === PageTypes.MyGroups) {
@@ -906,6 +890,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             let presentedId = roomInfo.room_alias || roomInfo.room_id;
             const room = MatrixClientPeg.get().getRoom(roomInfo.room_id);
             if (room) {
+                // Not all timeline events are decrypted ahead of time anymore
+                // Only the critical ones for a typical UI are
+                // This will start the decryption process for all events when a
+                // user views a room
+                room.decryptAllEvents();
                 const theAlias = Rooms.getDisplayAliasForRoom(room);
                 if (theAlias) {
                     presentedId = theAlias;
@@ -1022,7 +1011,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    private async createRoom(defaultPublic = false) {
+    private async createRoom(defaultPublic = false, defaultName?: string) {
         const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
         if (communityId) {
             // double check the user will have permission to associate this room with the community
@@ -1036,7 +1025,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
-        const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, { defaultPublic });
+        const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, {
+            defaultPublic,
+            defaultName,
+        });
 
         const [shouldCreate, opts] = await modal.finished;
         if (shouldCreate) {
@@ -1469,7 +1461,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
 
         const dft = new DecryptionFailureTracker((total, errorCode) => {
-            Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total);
+            Analytics.trackEvent('E2E', 'Decryption failure', errorCode, String(total));
             CountlyAnalytics.instance.track("decryption_failure", { errorCode }, null, { sum: total });
         }, (errorCode) => {
             // Map JS-SDK error codes to tracker codes for aggregation
@@ -1625,11 +1617,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'start_registration',
                 params: params,
             });
+            PerformanceMonitor.instance.start(PerformanceEntryNames.REGISTER);
         } else if (screen === 'login') {
             dis.dispatch({
                 action: 'start_login',
                 params: params,
             });
+            PerformanceMonitor.instance.start(PerformanceEntryNames.LOGIN);
         } else if (screen === 'forgot_password') {
             dis.dispatch({
                 action: 'start_password_recovery',
@@ -1684,6 +1678,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             const type = screen === "start_sso" ? "sso" : "cas";
             PlatformPeg.get().startSingleSignOn(cli, type, this.getFragmentAfterLogin());
         } else if (screen === 'groups') {
+            if (SettingsStore.getValue("feature_spaces")) {
+                dis.dispatch({ action: "view_home_page" });
+                return;
+            }
             dis.dispatch({
                 action: 'view_my_groups',
             });
@@ -1767,6 +1765,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 subAction: params.action,
             });
         } else if (screen.indexOf('group/') === 0) {
+            if (SettingsStore.getValue("feature_spaces")) {
+                dis.dispatch({ action: "view_home_page" });
+                return;
+            }
+
             const groupId = screen.substring(6);
 
             // TODO: Check valid group ID
@@ -1817,18 +1820,19 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     handleResize = () => {
-        const hideLhsThreshold = 1000;
-        const showLhsThreshold = 1000;
+        const LHS_THRESHOLD = 1000;
+        const width = UIStore.instance.windowWidth;
 
-        if (this.windowWidth > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
-            dis.dispatch({ action: 'hide_left_panel' });
-        }
-        if (this.windowWidth <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
+        if (this.prevWindowWidth < LHS_THRESHOLD && width >= LHS_THRESHOLD) {
             dis.dispatch({ action: 'show_left_panel' });
         }
 
+        if (this.prevWindowWidth >= LHS_THRESHOLD && width < LHS_THRESHOLD) {
+            dis.dispatch({ action: 'hide_left_panel' });
+        }
+
+        this.prevWindowWidth = width;
         this.state.resizeNotifier.notifyWindowResized();
-        this.windowWidth = window.innerWidth;
     };
 
     private dispatchTimelineResize() {
@@ -1949,6 +1953,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         // Create and start the client
         await Lifecycle.setLoggedIn(credentials);
         await this.postLoginSetup();
+
+        PerformanceMonitor.instance.stop(PerformanceEntryNames.LOGIN);
+        PerformanceMonitor.instance.stop(PerformanceEntryNames.REGISTER);
     };
 
     // complete security / e2e setup has finished
@@ -2085,6 +2092,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     onForgotPasswordClick={showPasswordReset ? this.onForgotPasswordClick : undefined}
                     onServerConfigChange={this.onServerConfigChange}
                     fragmentAfterLogin={fragmentAfterLogin}
+                    defaultUsername={this.props.startingFragmentQueryParams.defaultUsername}
                     {...this.getServerProperties()}
                 />
             );

src/components/structures/MessagePanel.js

@@ -19,21 +19,22 @@ limitations under the License.
 import React, {createRef} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
 import * as sdk from '../../index';
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
+import RoomContext from "../../contexts/RoomContext";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
-import {textForEvent} from "../../TextForEvent";
+import {hasText} from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import defaultDispatcher from '../../dispatcher/dispatcher';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -120,6 +121,9 @@ export default class MessagePanel extends React.Component {
         // callback which is called when the panel is scrolled.
         onScroll: PropTypes.func,
 
+        // callback which is called when the user interacts with the room timeline
+        onUserScroll: PropTypes.func,
+
         // callback which is called when more content is needed.
         onFillRequest: PropTypes.func,
 
@@ -148,6 +152,8 @@ export default class MessagePanel extends React.Component {
         enableFlair: PropTypes.bool,
     };
 
+    static contextType = RoomContext;
+
     constructor(props) {
         super(props);
 
@@ -377,7 +383,7 @@ export default class MessagePanel extends React.Component {
         // Always show highlighted event
         if (this.props.highlightedEventId === mxEv.getId()) return true;
 
-        return !shouldHideEvent(mxEv);
+        return !shouldHideEvent(mxEv, this.context);
     }
 
     _readMarkerForEvent(eventId, isLastEvent) {
@@ -471,6 +477,10 @@ export default class MessagePanel extends React.Component {
         return {nextEvent, nextTile};
     }
 
+    get _roomHasPendingEdit() {
+        return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
+    }
+
     _getEventTiles() {
         this.eventNodes = {};
 
@@ -559,6 +569,13 @@ export default class MessagePanel extends React.Component {
             }
         }
 
+        if (!this.props.editState && this._roomHasPendingEdit) {
+            defaultDispatcher.dispatch({
+                action: "edit_event",
+                event: this.props.room.findEventById(this._roomHasPendingEdit),
+            });
+        }
+
         if (grouper) {
             ret.push(...grouper.getTiles());
         }
@@ -574,7 +591,6 @@ export default class MessagePanel extends React.Component {
 
         const isEditing = this.props.editState &&
             this.props.editState.getEvent().getId() === mxEv.getId();
-
         // local echoes have a fake date, which could even be yesterday. Treat them
         // as 'today' for the date separators.
         let ts1 = mxEv.getTs();
@@ -602,10 +618,6 @@ export default class MessagePanel extends React.Component {
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
 
-        // we can't use local echoes as scroll tokens, because their event IDs change.
-        // Local echos have a send "status".
-        const scrollToken = mxEv.status ? undefined : eventId;
-
         const readReceipts = this._readReceiptsByEvent[eventId];
 
         let isLastSuccessful = false;
@@ -634,39 +646,36 @@ export default class MessagePanel extends React.Component {
 
         // use txnId as key if available so that we don't remount during sending
         ret.push(
-            <li
-                key={mxEv.getTxnId() || eventId}
-                ref={this._collectEventNode.bind(this, eventId)}
-                data-scroll-tokens={scrollToken}
-            >
-                <TileErrorBoundary mxEvent={mxEv}>
-                    <EventTile
-                        mxEvent={mxEv}
-                        continuation={continuation}
-                        isRedacted={mxEv.isRedacted()}
-                        replacingEventId={mxEv.replacingEventId()}
-                        editState={isEditing && this.props.editState}
-                        onHeightChanged={this._onHeightChanged}
-                        readReceipts={readReceipts}
-                        readReceiptMap={this._readReceiptMap}
-                        showUrlPreview={this.props.showUrlPreview}
-                        checkUnmounting={this._isUnmounting}
-                        eventSendStatus={mxEv.getAssociatedStatus()}
-                        tileShape={this.props.tileShape}
-                        isTwelveHour={this.props.isTwelveHour}
-                        permalinkCreator={this.props.permalinkCreator}
-                        last={last}
-                        lastInSection={willWantDateSeparator}
-                        lastSuccessful={isLastSuccessful}
-                        isSelectedEvent={highlight}
-                        getRelationsForEvent={this.props.getRelationsForEvent}
-                        showReactions={this.props.showReactions}
-                        layout={this.props.layout}
-                        enableFlair={this.props.enableFlair}
-                        showReadReceipts={this.props.showReadReceipts}
-                    />
-                </TileErrorBoundary>
-            </li>,
+            <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
+                <EventTile
+                    as="li"
+                    ref={this._collectEventNode.bind(this, eventId)}
+                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
+                    mxEvent={mxEv}
+                    continuation={continuation}
+                    isRedacted={mxEv.isRedacted()}
+                    replacingEventId={mxEv.replacingEventId()}
+                    editState={isEditing && this.props.editState}
+                    onHeightChanged={this._onHeightChanged}
+                    readReceipts={readReceipts}
+                    readReceiptMap={this._readReceiptMap}
+                    showUrlPreview={this.props.showUrlPreview}
+                    checkUnmounting={this._isUnmounting}
+                    eventSendStatus={mxEv.getAssociatedStatus()}
+                    tileShape={this.props.tileShape}
+                    isTwelveHour={this.props.isTwelveHour}
+                    permalinkCreator={this.props.permalinkCreator}
+                    last={last}
+                    lastInSection={willWantDateSeparator}
+                    lastSuccessful={isLastSuccessful}
+                    isSelectedEvent={highlight}
+                    getRelationsForEvent={this.props.getRelationsForEvent}
+                    showReactions={this.props.showReactions}
+                    layout={this.props.layout}
+                    enableFlair={this.props.enableFlair}
+                    showReadReceipts={this.props.showReadReceipts}
+                />
+            </TileErrorBoundary>,
         );
 
         return ret;
@@ -768,7 +777,7 @@ export default class MessagePanel extends React.Component {
     }
 
     _collectEventNode = (eventId, node) => {
-        this.eventNodes[eventId] = node;
+        this.eventNodes[eventId] = node?.ref?.current;
     }
 
     // once dynamic content in the events load, make the scrollPanel check the
@@ -842,13 +851,6 @@ export default class MessagePanel extends React.Component {
 
         const style = this.props.hidden ? { display: 'none' } : {};
 
-        const className = classNames(
-            this.props.className,
-            {
-                "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
-            },
-        );
-
         let whoIsTyping;
         if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
@@ -872,8 +874,9 @@ export default class MessagePanel extends React.Component {
             <ErrorBoundary>
                 <ScrollPanel
                     ref={this._scrollPanel}
-                    className={className}
+                    className={this.props.className}
                     onScroll={this.props.onScroll}
+                    onUserScroll={this.props.onUserScroll}
                     onResize={this.onResize}
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}
@@ -1164,11 +1167,8 @@ class MemberGrouper {
 
     add(ev) {
         if (ev.getType() === 'm.room.member') {
-            // We'll just double check that it's worth our time to do so, through an
-            // ugly hack. If textForEvent returns something, we should group it for
-            // rendering but if it doesn't then we'll exclude it.
-            const renderText = textForEvent(ev);
-            if (!renderText || renderText.trim().length === 0) return; // quietly ignore
+            // We can ignore any events that don't actually have a message to display
+            if (!hasText(ev)) return;
         }
         this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
             ev.getId(),

src/components/structures/MyGroups.js

@@ -25,6 +25,7 @@ import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import BetaCard from "../views/beta/BetaCard";
 
 @replaceableComponent("structures.MyGroups")
 export default class MyGroups extends React.Component {
@@ -81,8 +82,7 @@ export default class MyGroups extends React.Component {
                         </p>
                         <p>
                             { _t(
-                                "To set up a filter, drag a community avatar over to the filter panel on " +
-                                "the far left hand side of the screen. You can click on an avatar in the " +
+                                "You can click on an avatar in the " +
                                 "filter panel at any time to see only the rooms and people associated " +
                                 "with that community.",
                             ) }
@@ -139,6 +139,7 @@ export default class MyGroups extends React.Component {
                     </div>
                 </div>*/}
             </div>
+            <BetaCard featureId="feature_spaces" title={_t("Communities are changing to Spaces")} />
             <div className="mx_MyGroups_content">
                 { contentHeader }
                 { content }

src/components/structures/NotificationPanel.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,29 +14,25 @@ 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 from "react";
 
 import { _t } from '../../languageHandler';
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import * as sdk from "../../index";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import BaseCard from "../views/right_panel/BaseCard";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import TimelinePanel from "./TimelinePanel";
+import Spinner from "../views/elements/Spinner";
+
+interface IProps {
+    onClose(): void;
+}
 
 /*
  * Component which shows the global notification list using a TimelinePanel
  */
 @replaceableComponent("structures.NotificationPanel")
-class NotificationPanel extends React.Component {
-    static propTypes = {
-        onClose: PropTypes.func.isRequired,
-    };
-
+export default class NotificationPanel extends React.PureComponent<IProps> {
     render() {
-        // wrap a TimelinePanel with the jump-to-event bits turned off.
-        const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
-        const Loader = sdk.getComponent("elements.Spinner");
-
         const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
             <h2>{_t('You’re all caught up')}</h2>
             <p>{_t('You have no visible notifications.')}</p>
@@ -47,6 +41,7 @@ class NotificationPanel extends React.Component {
         let content;
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
+            // wrap a TimelinePanel with the jump-to-event bits turned off.
             content = (
                 <TimelinePanel
                     manageReadReceipts={false}
@@ -55,11 +50,12 @@ class NotificationPanel extends React.Component {
                     showUrlPreview={false}
                     tileShape="notif"
                     empty={emptyState}
+                    alwaysShowTimestamps={true}
                 />
             );
         } else {
             console.error("No notifTimelineSet available!");
-            content = <Loader />;
+            content = <Spinner />;
         }
 
         return <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
@@ -67,5 +63,3 @@ class NotificationPanel extends React.Component {
         </BaseCard>;
     }
 }
-
-export default NotificationPanel;

src/components/structures/RightPanel.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2015 - 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,70 +16,92 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { User } from "matrix-js-sdk/src/models/user";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
-import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
-import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GroupStore from '../../stores/GroupStore';
 import {
-    RightPanelPhases,
     RIGHT_PANEL_PHASES_NO_ARGS,
     RIGHT_PANEL_SPACE_PHASES,
+    RightPanelPhases,
 } from "../../stores/RightPanelStorePhases";
 import RightPanelStore from "../../stores/RightPanelStore";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import {Action} from "../../dispatcher/actions";
+import { Action } from "../../dispatcher/actions";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import SettingsStore from "../../settings/SettingsStore";
+import { ActionPayload } from "../../dispatcher/payloads";
+import MemberList from "../views/rooms/MemberList";
+import GroupMemberList from "../views/groups/GroupMemberList";
+import GroupRoomList from "../views/groups/GroupRoomList";
+import GroupRoomInfo from "../views/groups/GroupRoomInfo";
+import UserInfo from "../views/right_panel/UserInfo";
+import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo";
+import FilePanel from "./FilePanel";
+import NotificationPanel from "./NotificationPanel";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
+
+interface IProps {
+    room?: Room; // if showing panels for a given room, this is set
+    groupId?: string; // if showing panels for a given group, this is set
+    user?: User; // used if we know the user ahead of opening the panel
+    resizeNotifier: ResizeNotifier;
+}
+
+interface IState {
+    phase: RightPanelPhases;
+    isUserPrivilegedInGroup?: boolean;
+    member?: RoomMember;
+    verificationRequest?: VerificationRequest;
+    verificationRequestPromise?: Promise<VerificationRequest>;
+    space?: Room;
+    widgetId?: string;
+    groupRoomId?: string;
+    groupId?: string;
+    event: MatrixEvent;
+}
 
 @replaceableComponent("structures.RightPanel")
-export default class RightPanel extends React.Component {
-    static get propTypes() {
-        return {
-            room: PropTypes.instanceOf(Room), // if showing panels for a given room, this is set
-            groupId: PropTypes.string, // if showing panels for a given group, this is set
-            user: PropTypes.object, // used if we know the user ahead of opening the panel
-        };
-    }
-
+export default class RightPanel extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
 
+    private readonly delayedUpdate: RateLimitedFunc;
+    private dispatcherRef: string;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
             ...RightPanelStore.getSharedInstance().roomPanelPhaseParams,
-            phase: this._getPhaseFromProps(),
+            phase: this.getPhaseFromProps(),
             isUserPrivilegedInGroup: null,
-            member: this._getUserForPanel(),
+            member: this.getUserForPanel(),
         };
-        this.onAction = this.onAction.bind(this);
-        this.onRoomStateMember = this.onRoomStateMember.bind(this);
-        this.onGroupStoreUpdated = this.onGroupStoreUpdated.bind(this);
-        this.onInviteToGroupButtonClick = this.onInviteToGroupButtonClick.bind(this);
-        this.onAddRoomToGroupButtonClick = this.onAddRoomToGroupButtonClick.bind(this);
 
-        this._delayedUpdate = new RateLimitedFunc(() => {
+        this.delayedUpdate = new RateLimitedFunc(() => {
             this.forceUpdate();
         }, 500);
     }
 
-    // Helper function to split out the logic for _getPhaseFromProps() and the constructor
+    // Helper function to split out the logic for getPhaseFromProps() and the constructor
     // as both are called at the same time in the constructor.
-    _getUserForPanel() {
+    private getUserForPanel() {
         if (this.state && this.state.member) return this.state.member;
         const lastParams = RightPanelStore.getSharedInstance().roomPanelPhaseParams;
         return this.props.user || lastParams['member'];
     }
 
     // gets the current phase from the props and also maybe the store
-    _getPhaseFromProps() {
+    private getPhaseFromProps() {
         const rps = RightPanelStore.getSharedInstance();
-        const userForPanel = this._getUserForPanel();
+        const userForPanel = this.getUserForPanel();
         if (this.props.groupId) {
             if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) {
                 dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList});
@@ -118,7 +140,7 @@ export default class RightPanel extends React.Component {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context;
         cli.on("RoomState.members", this.onRoomStateMember);
-        this._initGroupStore(this.props.groupId);
+        this.initGroupStore(this.props.groupId);
     }
 
     componentWillUnmount() {
@@ -126,61 +148,47 @@ export default class RightPanel extends React.Component {
         if (this.context) {
             this.context.removeListener("RoomState.members", this.onRoomStateMember);
         }
-        this._unregisterGroupStore(this.props.groupId);
+        this.unregisterGroupStore();
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
         if (newProps.groupId !== this.props.groupId) {
-            this._unregisterGroupStore(this.props.groupId);
-            this._initGroupStore(newProps.groupId);
+            this.unregisterGroupStore();
+            this.initGroupStore(newProps.groupId);
         }
     }
 
-    _initGroupStore(groupId) {
+    private initGroupStore(groupId: string) {
         if (!groupId) return;
         GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
     }
 
-    _unregisterGroupStore() {
+    private unregisterGroupStore() {
         GroupStore.unregisterListener(this.onGroupStoreUpdated);
     }
 
-    onGroupStoreUpdated() {
+    private onGroupStoreUpdated = () => {
         this.setState({
             isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
         });
-    }
+    };
 
-    onInviteToGroupButtonClick() {
-        showGroupInviteDialog(this.props.groupId).then(() => {
-            this.setState({
-                phase: RightPanelPhases.GroupMemberList,
-            });
-        });
-    }
-
-    onAddRoomToGroupButtonClick() {
-        showGroupAddRoomDialog(this.props.groupId).then(() => {
-            this.forceUpdate();
-        });
-    }
-
-    onRoomStateMember(ev, state, member) {
+    private onRoomStateMember = (ev: MatrixEvent, _, member: RoomMember) => {
         if (!this.props.room || member.roomId !== this.props.room.roomId) {
             return;
         }
         // redraw the badge on the membership list
         if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) {
-            this._delayedUpdate();
+            this.delayedUpdate();
         } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
-            this._delayedUpdate();
+            this.delayedUpdate();
         }
-    }
+    };
 
-    onAction(payload) {
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.AfterRightPanelPhaseChange) {
             this.setState({
                 phase: payload.phase,
@@ -194,9 +202,9 @@ export default class RightPanel extends React.Component {
                 space: payload.space,
             });
         }
-    }
+    };
 
-    onClose = () => {
+    private onClose = () => {
         // XXX: There are three different ways of 'closing' this panel depending on what state
         // things are in... this knows far more than it should do about the state of the rest
         // of the app and is generally a bit silly.
@@ -224,16 +232,6 @@ export default class RightPanel extends React.Component {
     };
 
     render() {
-        const MemberList = sdk.getComponent('rooms.MemberList');
-        const UserInfo = sdk.getComponent('right_panel.UserInfo');
-        const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
-        const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
-        const FilePanel = sdk.getComponent('structures.FilePanel');
-
-        const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
-        const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
-        const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
-
         let panel = <div />;
         const roomId = this.props.room ? this.props.room.roomId : undefined;
 
@@ -285,6 +283,7 @@ export default class RightPanel extends React.Component {
                     user={this.state.member}
                     groupId={this.props.groupId}
                     key={this.state.member.userId}
+                    phase={this.state.phase}
                     onClose={this.onClose} />;
                 break;
 
@@ -299,6 +298,12 @@ export default class RightPanel extends React.Component {
                 panel = <NotificationPanel onClose={this.onClose} />;
                 break;
 
+            case RightPanelPhases.PinnedMessages:
+                if (SettingsStore.getValue("feature_pinning")) {
+                    panel = <PinnedMessagesCard room={this.props.room} onClose={this.onClose} />;
+                }
+                break;
+
             case RightPanelPhases.FilePanel:
                 panel = <FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />;
                 break;

src/components/structures/RoomDirectory.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016, 2019, 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.
@@ -16,39 +15,90 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import * as sdk from "../../index";
+import React from "react";
+
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
-import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
 import SdkConfig from '../../SdkConfig';
 import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
 import Analytics from '../../Analytics';
-import {ALL_ROOMS} from "../views/directory/NetworkDropdown";
+import {ALL_ROOMS, IFieldType, IInstance, IProtocol, Protocols} from "../views/directory/NetworkDropdown";
 import SettingsStore from "../../settings/SettingsStore";
 import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import GroupStore from "../../stores/GroupStore";
 import FlairStore from "../../stores/FlairStore";
 import CountlyAnalytics from "../../CountlyAnalytics";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../customisations/Media";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../customisations/Media";
+import { IDialogProps } from "../views/dialogs/IDialogProps";
+import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import BaseAvatar from "../views/avatars/BaseAvatar";
+import ErrorDialog from "../views/dialogs/ErrorDialog";
+import QuestionDialog from "../views/dialogs/QuestionDialog";
+import BaseDialog from "../views/dialogs/BaseDialog";
+import DirectorySearchBox from "../views/elements/DirectorySearchBox";
+import NetworkDropdown from "../views/directory/NetworkDropdown";
+import ScrollPanel from "./ScrollPanel";
+import Spinner from "../views/elements/Spinner";
+import { ActionPayload } from "../../dispatcher/payloads";
+
 
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 800;
 
-function track(action) {
+function track(action: string) {
     Analytics.trackEvent('RoomDirectory', action);
 }
 
+interface IProps extends IDialogProps {
+    initialText?: string;
+}
+
+interface IState {
+    publicRooms: IRoom[];
+    loading: boolean;
+    protocolsLoading: boolean;
+    error?: string;
+    instanceId: string | symbol;
+    roomServer: string;
+    filterString: string;
+    selectedCommunityId?: string;
+    communityName?: string;
+}
+
+/* eslint-disable camelcase */
+interface IRoom {
+    room_id: string;
+    name?: string;
+    avatar_url?: string;
+    topic?: string;
+    canonical_alias?: string;
+    aliases?: string[];
+    world_readable: boolean;
+    guest_can_join: boolean;
+    num_joined_members: number;
+}
+
+interface IPublicRoomsRequest {
+    limit?: number;
+    since?: string;
+    server?: string;
+    filter?: object;
+    include_all_networks?: boolean;
+    third_party_instance_id?: string;
+}
+/* eslint-enable camelcase */
+
 @replaceableComponent("structures.RoomDirectory")
-export default class RoomDirectory extends React.Component {
-    static propTypes = {
-        initialText: PropTypes.string,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class RoomDirectory extends React.Component<IProps, IState> {
+    private readonly startTime: number;
+    private unmounted = false
+    private nextBatch: string = null;
+    private filterTimeout: NodeJS.Timeout;
+    private protocols: Protocols;
 
     constructor(props) {
         super(props);
@@ -56,41 +106,21 @@ export default class RoomDirectory extends React.Component {
         CountlyAnalytics.instance.trackRoomDirectoryBegin();
         this.startTime = CountlyAnalytics.getTimestamp();
 
-        const selectedCommunityId = GroupFilterOrderStore.getSelectedTags()[0];
-        this.state = {
-            publicRooms: [],
-            loading: true,
-            protocolsLoading: true,
-            error: null,
-            instanceId: undefined,
-            roomServer: MatrixClientPeg.getHomeserverName(),
-            filterString: this.props.initialText || "",
-            selectedCommunityId: SettingsStore.getValue("feature_communities_v2_prototypes")
-                ? selectedCommunityId
-                : null,
-            communityName: null,
-        };
+        const selectedCommunityId = SettingsStore.getValue("feature_communities_v2_prototypes")
+            ? GroupFilterOrderStore.getSelectedTags()[0]
+            : null;
 
-        this._unmounted = false;
-        this.nextBatch = null;
-        this.filterTimeout = null;
-        this.scrollPanel = null;
-        this.protocols = null;
-
-        this.state.protocolsLoading = true;
+        let protocolsLoading = true;
         if (!MatrixClientPeg.get()) {
             // We may not have a client yet when invoked from welcome page
-            this.state.protocolsLoading = false;
-            return;
-        }
-
-        if (!this.state.selectedCommunityId) {
+            protocolsLoading = false;
+        } else if (!selectedCommunityId) {
             MatrixClientPeg.get().getThirdpartyProtocols().then((response) => {
                 this.protocols = response;
-                this.setState({protocolsLoading: false});
+                this.setState({ protocolsLoading: false });
             }, (err) => {
                 console.warn(`error loading third party protocols: ${err}`);
-                this.setState({protocolsLoading: false});
+                this.setState({ protocolsLoading: false });
                 if (MatrixClientPeg.get().isGuest()) {
                     // Guests currently aren't allowed to use this API, so
                     // ignore this as otherwise this error is literally the
@@ -103,19 +133,31 @@ export default class RoomDirectory extends React.Component {
                     error: _t(
                         '%(brand)s failed to get the protocol list from the homeserver. ' +
                         'The homeserver may be too old to support third party networks.',
-                        {brand},
+                        { brand },
                     ),
                 });
             });
         } else {
             // We don't use the protocols in the communities v2 prototype experience
-            this.state.protocolsLoading = false;
+            protocolsLoading = false;
 
             // Grab the profile info async
             FlairStore.getGroupProfileCached(MatrixClientPeg.get(), this.state.selectedCommunityId).then(profile => {
-                this.setState({communityName: profile.name});
+                this.setState({ communityName: profile.name });
             });
         }
+
+        this.state = {
+            publicRooms: [],
+            loading: true,
+            error: null,
+            instanceId: undefined,
+            roomServer: MatrixClientPeg.getHomeserverName(),
+            filterString: this.props.initialText || "",
+            selectedCommunityId,
+            communityName: null,
+            protocolsLoading,
+        };
     }
 
     componentDidMount() {
@@ -126,10 +168,10 @@ export default class RoomDirectory extends React.Component {
         if (this.filterTimeout) {
             clearTimeout(this.filterTimeout);
         }
-        this._unmounted = true;
+        this.unmounted = true;
     }
 
-    refreshRoomList = () => {
+    private refreshRoomList = () => {
         if (this.state.selectedCommunityId) {
             this.setState({
                 publicRooms: GroupStore.getGroupRooms(this.state.selectedCommunityId).map(r => {
@@ -165,7 +207,7 @@ export default class RoomDirectory extends React.Component {
         this.getMoreRooms();
     };
 
-    getMoreRooms() {
+    private getMoreRooms() {
         if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms
         if (!MatrixClientPeg.get()) return Promise.resolve();
 
@@ -173,34 +215,34 @@ export default class RoomDirectory extends React.Component {
             loading: true,
         });
 
-        const my_filter_string = this.state.filterString;
-        const my_server = this.state.roomServer;
+        const filterString = this.state.filterString;
+        const roomServer = this.state.roomServer;
         // remember the next batch token when we sent the request
         // too. If it's changed, appending to the list will corrupt it.
-        const my_next_batch = this.nextBatch;
-        const opts = {limit: 20};
-        if (my_server != MatrixClientPeg.getHomeserverName()) {
-            opts.server = my_server;
+        const nextBatch = this.nextBatch;
+        const opts: IPublicRoomsRequest = { limit: 20 };
+        if (roomServer != MatrixClientPeg.getHomeserverName()) {
+            opts.server = roomServer;
         }
         if (this.state.instanceId === ALL_ROOMS) {
             opts.include_all_networks = true;
         } else if (this.state.instanceId) {
-            opts.third_party_instance_id = this.state.instanceId;
+            opts.third_party_instance_id = this.state.instanceId as string;
         }
         if (this.nextBatch) opts.since = this.nextBatch;
-        if (my_filter_string) opts.filter = { generic_search_term: my_filter_string };
+        if (filterString) opts.filter = { generic_search_term: filterString };
         return MatrixClientPeg.get().publicRooms(opts).then((data) => {
             if (
-                my_filter_string != this.state.filterString ||
-                my_server != this.state.roomServer ||
-                my_next_batch != this.nextBatch) {
+                filterString != this.state.filterString ||
+                roomServer != this.state.roomServer ||
+                nextBatch != this.nextBatch) {
                 // if the filter or server has changed since this request was sent,
                 // throw away the result (don't even clear the busy flag
                 // since we must still have a request in flight)
                 return;
             }
 
-            if (this._unmounted) {
+            if (this.unmounted) {
                 // if we've been unmounted, we don't care either.
                 return;
             }
@@ -211,23 +253,23 @@ export default class RoomDirectory extends React.Component {
             }
 
             this.nextBatch = data.next_batch;
-            this.setState((s) => {
-                s.publicRooms.push(...(data.chunk || []));
-                s.loading = false;
-                return s;
-            });
+            this.setState((s) => ({
+                ...s,
+                publicRooms: [...s.publicRooms, ...(data.chunk || [])],
+                loading: false,
+            }));
             return Boolean(data.next_batch);
         }, (err) => {
             if (
-                my_filter_string != this.state.filterString ||
-                my_server != this.state.roomServer ||
-                my_next_batch != this.nextBatch) {
+                filterString != this.state.filterString ||
+                roomServer != this.state.roomServer ||
+                nextBatch != this.nextBatch) {
                 // as above: we don't care about errors for old
                 // requests either
                 return;
             }
 
-            if (this._unmounted) {
+            if (this.unmounted) {
                 // if we've been unmounted, we don't care either.
                 return;
             }
@@ -252,13 +294,10 @@ export default class RoomDirectory extends React.Component {
      * HS admins to do this through the RoomSettings interface, but
      * this needs SPEC-417.
      */
-    removeFromDirectory(room) {
-        const alias = get_display_alias_for_room(room);
+    private removeFromDirectory(room: IRoom) {
+        const alias = getDisplayAliasForRoom(room);
         const name = room.name || alias || _t('Unnamed room');
 
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-
         let desc;
         if (alias) {
             desc = _t('Delete the room address %(alias)s and remove %(name)s from the directory?', {alias, name});
@@ -269,11 +308,10 @@ export default class RoomDirectory extends React.Component {
         Modal.createTrackedDialog('Remove from Directory', '', QuestionDialog, {
             title: _t('Remove from Directory'),
             description: desc,
-            onFinished: (should_delete) => {
-                if (!should_delete) return;
+            onFinished: (shouldDelete: boolean) => {
+                if (!shouldDelete) return;
 
-                const Loader = sdk.getComponent("elements.Spinner");
-                const modal = Modal.createDialog(Loader);
+                const modal = Modal.createDialog(Spinner);
                 let step = _t('remove %(name)s from the directory.', {name: name});
 
                 MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
@@ -289,23 +327,24 @@ export default class RoomDirectory extends React.Component {
                     console.error("Failed to " + step + ": " + err);
                     Modal.createTrackedDialog('Remove from Directory Error', '', ErrorDialog, {
                         title: _t('Error'),
-                        description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded')),
+                        description: (err && err.message)
+                            ? err.message
+                            : _t('The server may be unavailable or overloaded'),
                     });
                 });
             },
         });
     }
 
-    onRoomClicked = (room, ev) => {
+    private onRoomClicked = (room: IRoom, ev: ButtonEvent) => {
+        // If room was shift-clicked, remove it from the room directory
         if (ev.shiftKey && !this.state.selectedCommunityId) {
             ev.preventDefault();
             this.removeFromDirectory(room);
-        } else {
-            this.showRoom(room);
         }
     };
 
-    onOptionChange = (server, instanceId) => {
+    private onOptionChange = (server: string, instanceId?: string | symbol) => {
         // clear next batch so we don't try to load more rooms
         this.nextBatch = null;
         this.setState({
@@ -325,13 +364,13 @@ export default class RoomDirectory extends React.Component {
         // Easiest to just blow away the state & re-fetch.
     };
 
-    onFillRequest = (backwards) => {
+    private onFillRequest = (backwards: boolean) => {
         if (backwards || !this.nextBatch) return Promise.resolve(false);
 
         return this.getMoreRooms();
     };
 
-    onFilterChange = (alias) => {
+    private onFilterChange = (alias: string) => {
         this.setState({
             filterString: alias || null,
         });
@@ -349,7 +388,7 @@ export default class RoomDirectory extends React.Component {
         }, 700);
     };
 
-    onFilterClear = () => {
+    private onFilterClear = () => {
         // update immediately
         this.setState({
             filterString: null,
@@ -360,7 +399,7 @@ export default class RoomDirectory extends React.Component {
         }
     };
 
-    onJoinFromSearchClick = (alias) => {
+    private onJoinFromSearchClick = (alias: string) => {
         // If we don't have a particular instance id selected, just show that rooms alias
         if (!this.state.instanceId || this.state.instanceId === ALL_ROOMS) {
             // If the user specified an alias without a domain, add on whichever server is selected
@@ -373,9 +412,10 @@ export default class RoomDirectory extends React.Component {
             // This is a 3rd party protocol. Let's see if we can join it
             const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
             const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
-            const fields = protocolName ? this._getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance) : null;
+            const fields = protocolName
+                ? this.getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance)
+                : null;
             if (!fields) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 const brand = SdkConfig.get().brand;
                 Modal.createTrackedDialog('Unable to join network', '', ErrorDialog, {
                     title: _t('Unable to join network'),
@@ -387,14 +427,12 @@ export default class RoomDirectory extends React.Component {
                 if (resp.length > 0 && resp[0].alias) {
                     this.showRoomAlias(resp[0].alias, true);
                 } else {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createTrackedDialog('Room not found', '', ErrorDialog, {
                         title: _t('Room not found'),
                         description: _t('Couldn\'t find a matching Matrix room'),
                     });
                 }
             }, (e) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createTrackedDialog('Fetching third party location failed', '', ErrorDialog, {
                     title: _t('Fetching third party location failed'),
                     description: _t('Unable to look up room ID from server'),
@@ -403,36 +441,37 @@ export default class RoomDirectory extends React.Component {
         }
     };
 
-    onPreviewClick = (ev, room) => {
+    private onPreviewClick = (ev: ButtonEvent, room: IRoom) => {
         this.showRoom(room, null, false, true);
         ev.stopPropagation();
     };
 
-    onViewClick = (ev, room) => {
+    private onViewClick = (ev: ButtonEvent, room: IRoom) => {
         this.showRoom(room);
         ev.stopPropagation();
     };
 
-    onJoinClick = (ev, room) => {
+    private onJoinClick = (ev: ButtonEvent, room: IRoom) => {
         this.showRoom(room, null, true);
         ev.stopPropagation();
     };
 
-    onCreateRoomClick = room => {
+    private onCreateRoomClick = () => {
         this.onFinished();
         dis.dispatch({
             action: 'view_create_room',
             public: true,
+            defaultName: this.state.filterString.trim(),
         });
     };
 
-    showRoomAlias(alias, autoJoin=false) {
+    private showRoomAlias(alias: string, autoJoin = false) {
         this.showRoom(null, alias, autoJoin);
     }
 
-    showRoom(room, room_alias, autoJoin = false, shouldPeek = false) {
+    private showRoom(room: IRoom, roomAlias?: string, autoJoin = false, shouldPeek = false) {
         this.onFinished();
-        const payload = {
+        const payload: ActionPayload = {
             action: 'view_room',
             auto_join: autoJoin,
             should_peek: shouldPeek,
@@ -449,15 +488,15 @@ export default class RoomDirectory extends React.Component {
                 }
             }
 
-            if (!room_alias) {
-                room_alias = get_display_alias_for_room(room);
+            if (!roomAlias) {
+                roomAlias = getDisplayAliasForRoom(room);
             }
 
             payload.oob_data = {
                 avatarUrl: room.avatar_url,
                 // XXX: This logic is duplicated from the JS SDK which
                 // would normally decide what the name is.
-                name: room.name || room_alias || _t('Unnamed room'),
+                name: room.name || roomAlias || _t('Unnamed room'),
             };
 
             if (this.state.roomServer) {
@@ -471,21 +510,19 @@ export default class RoomDirectory extends React.Component {
         // which servers to start querying. However, there's no other way to join rooms in
         // this list without aliases at present, so if roomAlias isn't set here we have no
         // choice but to supply the ID.
-        if (room_alias) {
-            payload.room_alias = room_alias;
+        if (roomAlias) {
+            payload.room_alias = roomAlias;
         } else {
             payload.room_id = room.room_id;
         }
         dis.dispatch(payload);
     }
 
-    createRoomCells(room) {
+    private createRoomCells(room: IRoom) {
         const client = MatrixClientPeg.get();
         const clientRoom = client.getRoom(room.room_id);
         const hasJoinedRoom = clientRoom && clientRoom.getMyMembership() === "join";
         const isGuest = client.isGuest();
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         let previewButton;
         let joinOrViewButton;
 
@@ -495,20 +532,26 @@ export default class RoomDirectory extends React.Component {
         // it is readable, the preview appears as normal.
         if (!hasJoinedRoom && (room.world_readable || isGuest)) {
             previewButton = (
-                <AccessibleButton kind="secondary" onClick={(ev) => this.onPreviewClick(ev, room)}>{_t("Preview")}</AccessibleButton>
+                <AccessibleButton kind="secondary" onClick={(ev) => this.onPreviewClick(ev, room)}>
+                    { _t("Preview") }
+                </AccessibleButton>
             );
         }
         if (hasJoinedRoom) {
             joinOrViewButton = (
-                <AccessibleButton kind="secondary" onClick={(ev) => this.onViewClick(ev, room)}>{_t("View")}</AccessibleButton>
+                <AccessibleButton kind="secondary" onClick={(ev) => this.onViewClick(ev, room)}>
+                    { _t("View") }
+                </AccessibleButton>
             );
         } else if (!isGuest) {
             joinOrViewButton = (
-                <AccessibleButton kind="primary" onClick={(ev) => this.onJoinClick(ev, room)}>{_t("Join")}</AccessibleButton>
+                <AccessibleButton kind="primary" onClick={(ev) => this.onJoinClick(ev, room)}>
+                    { _t("Join") }
+                </AccessibleButton>
             );
         }
 
-        let name = room.name || get_display_alias_for_room(room) || _t('Unnamed room');
+        let name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
         if (name.length > MAX_NAME_LENGTH) {
             name = `${name.substring(0, MAX_NAME_LENGTH)}...`;
         }
@@ -524,72 +567,80 @@ export default class RoomDirectory extends React.Component {
         let avatarUrl = null;
         if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32);
 
+        // We use onMouseDown instead of onClick, so that we can avoid text getting selected
         return [
-            <div key={ `${room.room_id}_avatar` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_avatar` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomAvatar"
             >
-                <BaseAvatar width={32} height={32} resizeMethod='crop'
-                    name={ name } idName={ name }
-                    url={ avatarUrl }
+                <BaseAvatar
+                    width={32}
+                    height={32}
+                    resizeMethod='crop'
+                    name={name}
+                    idName={name}
+                    url={avatarUrl}
                 />
             </div>,
-            <div key={ `${room.room_id}_description` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_description` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomDescription"
             >
-                <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
-                <div className="mx_RoomDirectory_topic"
-                    onClick={ (ev) => { ev.stopPropagation(); } }
+                <div
+                    className="mx_RoomDirectory_name"
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
+                >
+                    { name }
+                </div>&nbsp;
+                <div
+                    className="mx_RoomDirectory_topic"
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                     dangerouslySetInnerHTML={{ __html: topic }}
                 />
-                <div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(room) }</div>
+                <div
+                    className="mx_RoomDirectory_alias"
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
+                >
+                    { getDisplayAliasForRoom(room) }
+                </div>
             </div>,
-            <div key={ `${room.room_id}_memberCount` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_memberCount` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomMemberCount"
             >
                 { room.num_joined_members }
             </div>,
-            <div key={ `${room.room_id}_preview` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
+            <div
+                key={ `${room.room_id}_preview` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
                 className="mx_RoomDirectory_preview"
             >
-                {previewButton}
+                { previewButton }
             </div>,
-            <div key={ `${room.room_id}_join` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_join` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_join"
             >
-                {joinOrViewButton}
+                { joinOrViewButton }
             </div>,
         ];
     }
 
-    collectScrollPanel = (element) => {
-        this.scrollPanel = element;
-    };
-
-    _stringLooksLikeId(s, field_type) {
+    private stringLooksLikeId(s: string, fieldType: IFieldType) {
         let pat = /^#[^\s]+:[^\s]/;
-        if (field_type && field_type.regexp) {
-            pat = new RegExp(field_type.regexp);
+        if (fieldType && fieldType.regexp) {
+            pat = new RegExp(fieldType.regexp);
         }
 
         return pat.test(s);
     }
 
-    _getFieldsForThirdPartyLocation(userInput, protocol, instance) {
+    private getFieldsForThirdPartyLocation(userInput: string, protocol: IProtocol, instance: IInstance) {
         // make an object with the fields specified by that protocol. We
         // require that the values of all but the last field come from the
         // instance. The last is the user input.
@@ -605,71 +656,73 @@ export default class RoomDirectory extends React.Component {
         return fields;
     }
 
-    /**
-     * called by the parent component when PageUp/Down/etc is pressed.
-     *
-     * We pass it down to the scroll panel.
-     */
-    handleScrollKey = ev => {
-        if (this.scrollPanel) {
-            this.scrollPanel.handleScrollKey(ev);
-        }
-    };
-
-    onFinished = () => {
+    private onFinished = () => {
         CountlyAnalytics.instance.trackRoomDirectory(this.startTime);
-        this.props.onFinished();
+        this.props.onFinished(false);
     };
 
     render() {
-        const Loader = sdk.getComponent("elements.Spinner");
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
         let content;
         if (this.state.error) {
             content = this.state.error;
         } else if (this.state.protocolsLoading) {
-            content = <Loader />;
+            content = <Spinner />;
         } else {
             const cells = (this.state.publicRooms || [])
-                .reduce((cells, room) => cells.concat(this.createRoomCells(room)), [],);
+                .reduce((cells, room) => cells.concat(this.createRoomCells(room)), []);
             // we still show the scrollpanel, at least for now, because
             // otherwise we don't fetch more because we don't get a fill
             // request from the scrollpanel because there isn't one
 
             let spinner;
             if (this.state.loading) {
-                spinner = <Loader />;
+                spinner = <Spinner />;
             }
 
-            let scrollpanel_content;
+            const createNewButton = <>
+                <hr />
+                <AccessibleButton kind="primary" onClick={this.onCreateRoomClick} className="mx_RoomDirectory_newRoom">
+                    { _t("Create new room") }
+                </AccessibleButton>
+            </>;
+
+            let scrollPanelContent;
+            let footer;
             if (cells.length === 0 && !this.state.loading) {
-                scrollpanel_content = <i>{ _t('No rooms to show') }</i>;
+                footer = <>
+                    <h5>{ _t('No results for "%(query)s"', { query: this.state.filterString.trim() }) }</h5>
+                    <p>
+                        { _t("Try different words or check for typos. " +
+                            "Some results may not be visible as they're private and you need an invite to join them.") }
+                    </p>
+                    { createNewButton }
+                </>;
             } else {
-                scrollpanel_content = <div className="mx_RoomDirectory_table">
+                scrollPanelContent = <div className="mx_RoomDirectory_table">
                     { cells }
                 </div>;
+                if (!this.state.loading && !this.nextBatch) {
+                    footer = createNewButton;
+                }
             }
-            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-            content = <ScrollPanel ref={this.collectScrollPanel}
+            content = <ScrollPanel
                 className="mx_RoomDirectory_tableWrapper"
-                onFillRequest={ this.onFillRequest }
+                onFillRequest={this.onFillRequest}
                 stickyBottom={false}
                 startAtBottom={false}
             >
-                { scrollpanel_content }
+                { scrollPanelContent }
                 { spinner }
+                { footer && <div className="mx_RoomDirectory_footer">
+                    { footer }
+                </div> }
             </ScrollPanel>;
         }
 
         let listHeader;
         if (!this.state.protocolsLoading) {
-            const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
-            const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
-
             const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
-            let instance_expected_field_type;
+            let instanceExpectedFieldType;
             if (
                 protocolName &&
                 this.protocols &&
@@ -677,21 +730,27 @@ export default class RoomDirectory extends React.Component {
                 this.protocols[protocolName].location_fields.length > 0 &&
                 this.protocols[protocolName].field_types
             ) {
-                const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
-                instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
+                const lastField = this.protocols[protocolName].location_fields.slice(-1)[0];
+                instanceExpectedFieldType = this.protocols[protocolName].field_types[lastField];
             }
 
             let placeholder = _t('Find a room…');
             if (!this.state.instanceId || this.state.instanceId === ALL_ROOMS) {
-                placeholder = _t("Find a room… (e.g. %(exampleRoom)s)", {exampleRoom: "#example:" + this.state.roomServer});
-            } else if (instance_expected_field_type) {
-                placeholder = instance_expected_field_type.placeholder;
+                placeholder = _t("Find a room… (e.g. %(exampleRoom)s)", {
+                    exampleRoom: "#example:" + this.state.roomServer,
+                });
+            } else if (instanceExpectedFieldType) {
+                placeholder = instanceExpectedFieldType.placeholder;
             }
 
-            let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
+            let showJoinButton = this.stringLooksLikeId(this.state.filterString, instanceExpectedFieldType);
             if (protocolName) {
                 const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
-                if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
+                if (this.getFieldsForThirdPartyLocation(
+                    this.state.filterString,
+                    this.protocols[protocolName],
+                    instance,
+                ) === null) {
                     showJoinButton = false;
                 }
             }
@@ -723,12 +782,11 @@ export default class RoomDirectory extends React.Component {
         }
         const explanation =
             _t("If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.", null,
-                {a: sub => {
-                    return (<AccessibleButton
-                        kind="secondary"
-                        onClick={this.onCreateRoomClick}
-                    >{sub}</AccessibleButton>);
-                }},
+                {a: sub => (
+                    <AccessibleButton kind="secondary" onClick={this.onCreateRoomClick}>
+                        { sub }
+                    </AccessibleButton>
+                )},
             );
 
         const title = this.state.selectedCommunityId
@@ -756,6 +814,6 @@ export default class RoomDirectory extends React.Component {
 
 // Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
 // but works with the objects we get from the public room list
-function get_display_alias_for_room(room) {
-    return room.canonical_alias || (room.aliases ? room.aliases[0] : "");
+function getDisplayAliasForRoom(room: IRoom) {
+    return room.canonical_alias || room.aliases?.[0] || "";
 }

src/components/structures/RoomStatusBar.js

@@ -41,7 +41,7 @@ export function getUnsentMessages(room) {
 }
 
 @replaceableComponent("structures.RoomStatusBar")
-export default class RoomStatusBar extends React.Component {
+export default class RoomStatusBar extends React.PureComponent {
     static propTypes = {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,

src/components/structures/RoomView.tsx

@@ -23,8 +23,9 @@ limitations under the License.
 
 import React, { createRef } from 'react';
 import classNames from 'classnames';
-import { Room } from "matrix-js-sdk/src/models/room";
+import { IRecommendedVersion, NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 import { EventSubscription } from "fbemitter";
 
 import shouldHideEvent from '../../shouldHideEvent';
@@ -46,7 +47,7 @@ import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
 import SettingsStore from "../../settings/SettingsStore";
-import {Layout} from "../../settings/Layout";
+import { Layout } from "../../settings/Layout";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
 import { haveTileForEvent } from "../views/rooms/EventTile";
@@ -54,16 +55,13 @@ import RoomContext from "../../contexts/RoomContext";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
 import { Action } from "../../dispatcher/actions";
-import { SettingLevel } from "../../settings/SettingLevel";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
 import ScrollPanel from "./ScrollPanel";
 import TimelinePanel from "./TimelinePanel";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
-import ForwardMessage from "../views/rooms/ForwardMessage";
-import SearchBar from "../views/rooms/SearchBar";
+import SearchBar, { SearchScope } from "../views/rooms/SearchBar";
 import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
-import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
 import AuxPanel from "../views/rooms/AuxPanel";
 import RoomHeader from "../views/rooms/RoomHeader";
 import { XOR } from "../../@types/common";
@@ -82,7 +80,9 @@ import { getKeyBindingsManager, RoomAction } from '../../KeyBindingsManager';
 import { objectHasDiff } from "../../utils/objects";
 import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import UIStore from "../../stores/UIStore";
+import EditorStateTransfer from "../../utils/EditorStateTransfer";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -136,16 +136,15 @@ export interface IState {
     // Whether to highlight the event scrolled to
     isInitialEventHighlighted?: boolean;
     replyToEvent?: MatrixEvent;
-    forwardingEvent?: MatrixEvent;
     numUnreadMessages: number;
     draggingFile: boolean;
     searching: boolean;
     searchTerm?: string;
-    searchScope?: "All" | "Room";
+    searchScope?: SearchScope;
     searchResults?: XOR<{}, {
         count: number;
         highlights: string[];
-        results: MatrixEvent[];
+        results: SearchResult[];
         next_batch: string; // eslint-disable-line camelcase
     }>;
     searchHighlights?: string[];
@@ -155,8 +154,6 @@ export interface IState {
     canPeek: boolean;
     showApps: boolean;
     isPeeking: boolean;
-    showingPinned: boolean;
-    showReadReceipts: boolean;
     showRightPanel: boolean;
     // error object, as from the matrix client/server API
     // If we failed to load information about the room,
@@ -175,14 +172,17 @@ export interface IState {
     statusBarVisible: boolean;
     // We load this later by asking the js-sdk to suggest a version for us.
     // This object is the result of Room#getRecommendedVersion()
-    upgradeRecommendation?: {
-        version: string;
-        needsUpgrade: boolean;
-        urgent: boolean;
-    };
+
+    upgradeRecommendation?: IRecommendedVersion;
     canReact: boolean;
     canReply: boolean;
     layout: Layout;
+    lowBandwidth: boolean;
+    showReadReceipts: boolean;
+    showRedactions: boolean;
+    showJoinLeaves: boolean;
+    showAvatarChanges: boolean;
+    showDisplaynameChanges: boolean;
     matrixClientIsReady: boolean;
     showUrlPreview?: boolean;
     e2eStatus?: E2EStatus;
@@ -193,6 +193,7 @@ export interface IState {
     // whether or not a spaces context switch brought us here,
     // if it did we don't want the room to be marked as read as soon as it is loaded.
     wasContextSwitch?: boolean;
+    editState?: EditorStateTransfer;
 }
 
 @replaceableComponent("structures.RoomView")
@@ -200,8 +201,7 @@ export default class RoomView extends React.Component<IProps, IState> {
     private readonly dispatcherRef: string;
     private readonly roomStoreToken: EventSubscription;
     private readonly rightPanelStoreToken: EventSubscription;
-    private readonly showReadReceiptsWatchRef: string;
-    private readonly layoutWatcherRef: string;
+    private settingWatchers: string[];
 
     private unmounted = false;
     private permalinkCreators: Record<string, RoomPermalinkCreator> = {};
@@ -232,8 +232,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             canPeek: false,
             showApps: false,
             isPeeking: false,
-            showingPinned: false,
-            showReadReceipts: true,
             showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
             joining: false,
             atEndOfLiveTimeline: true,
@@ -243,6 +241,12 @@ export default class RoomView extends React.Component<IProps, IState> {
             canReact: false,
             canReply: false,
             layout: SettingsStore.getValue("layout"),
+            lowBandwidth: SettingsStore.getValue("lowBandwidth"),
+            showReadReceipts: true,
+            showRedactions: true,
+            showJoinLeaves: true,
+            showAvatarChanges: true,
+            showDisplaynameChanges: true,
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
             dragCounter: 0,
         };
@@ -269,9 +273,14 @@ export default class RoomView extends React.Component<IProps, IState> {
         WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
         WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
-        this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
-            this.onReadReceiptsChange);
-        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, this.onLayoutChange);
+        this.settingWatchers = [
+            SettingsStore.watchSetting("layout", null, () =>
+                this.setState({ layout: SettingsStore.getValue("layout") }),
+            ),
+            SettingsStore.watchSetting("lowBandwidth", null, () =>
+                this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }),
+            ),
+        ];
     }
 
     private onWidgetStoreUpdate = () => {
@@ -324,14 +333,45 @@ export default class RoomView extends React.Component<IProps, IState> {
             initialEventId: RoomViewStore.getInitialEventId(),
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             replyToEvent: RoomViewStore.getQuotingEvent(),
-            forwardingEvent: RoomViewStore.getForwardingEvent(),
             // we should only peek once we have a ready client
             shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
-            showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+            showRedactions: SettingsStore.getValue("showRedactions", roomId),
+            showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
+            showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
+            showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
             wasContextSwitch: RoomViewStore.getWasContextSwitch(),
         };
 
+        // Add watchers for each of the settings we just looked up
+        this.settingWatchers = this.settingWatchers.concat([
+            SettingsStore.watchSetting("showReadReceipts", null, () =>
+                this.setState({
+                    showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showRedactions", null, () =>
+                this.setState({
+                    showRedactions: SettingsStore.getValue("showRedactions", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showJoinLeaves", null, () =>
+                this.setState({
+                    showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showAvatarChanges", null, () =>
+                this.setState({
+                    showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
+                }),
+            ),
+            SettingsStore.watchSetting("showDisplaynameChanges", null, () =>
+                this.setState({
+                    showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
+                }),
+            ),
+        ]);
+
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
             // Stop peeking because we have joined this room now
             this.context.stopPeeking();
@@ -528,7 +568,16 @@ export default class RoomView extends React.Component<IProps, IState> {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return (objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState));
+        const hasPropsDiff = objectHasDiff(this.props, nextProps);
+
+        const { upgradeRecommendation, ...state } = this.state;
+        const { upgradeRecommendation: newUpgradeRecommendation, ...newState } = nextState;
+
+        const hasStateDiff =
+            newUpgradeRecommendation?.needsUpgrade !== upgradeRecommendation?.needsUpgrade ||
+            objectHasDiff(state, newState);
+
+        return hasPropsDiff || hasStateDiff;
     }
 
     componentDidUpdate() {
@@ -627,10 +676,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             );
         }
 
-        if (this.showReadReceiptsWatchRef) {
-            SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
-        }
-
         // cancel any pending calls to the rate_limited_funcs
         this.updateRoomMembers.cancelPendingCall();
 
@@ -638,14 +683,22 @@ export default class RoomView extends React.Component<IProps, IState> {
         // console.log("Tinter.tint from RoomView.unmount");
         // Tinter.tint(); // reset colourscheme
 
-        SettingsStore.unwatchSetting(this.layoutWatcherRef);
+        for (const watcher of this.settingWatchers) {
+            SettingsStore.unwatchSetting(watcher);
+        }
     }
 
-    private onLayoutChange = () => {
-        this.setState({
-            layout: SettingsStore.getValue("layout"),
-        });
-    };
+    private onUserScroll = () => {
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.room.roomId,
+                event_id: this.state.initialEventId,
+                highlighted: false,
+                replyingToEvent: this.state.replyToEvent,
+            });
+        }
+    }
 
     private onRightPanelStoreUpdate = () => {
         this.setState({
@@ -764,6 +817,36 @@ export default class RoomView extends React.Component<IProps, IState> {
             case 'focus_search':
                 this.onSearchClick();
                 break;
+
+            case "edit_event": {
+                const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+                this.setState({ editState }, () => {
+                    if (payload.event) {
+                        this.messagePanel?.scrollToEventIfNeeded(payload.event.getId());
+                    }
+                });
+                break;
+            }
+
+            case Action.ComposerInsert: {
+                // re-dispatch to the correct composer
+                if (this.state.editState) {
+                    dis.dispatch({
+                        ...payload,
+                        action: "edit_composer_insert",
+                    });
+                } else {
+                    dis.dispatch({
+                        ...payload,
+                        action: "send_composer_insert",
+                    });
+                }
+                break;
+            }
+
+            case "scroll_to_bottom":
+                this.messagePanel?.jumpToLiveTimeline();
+                break;
         }
     };
 
@@ -797,7 +880,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             // update unread count when scrolled up
             if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
                 // no change
-            } else if (!shouldHideEvent(ev)) {
+            } else if (!shouldHideEvent(ev, this.state)) {
                 this.setState((state, props) => {
                     return {numUnreadMessages: state.numUnreadMessages + 1};
                 });
@@ -1114,7 +1197,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             Promise.resolve().then(() => {
                 const signUrl = this.props.threepidInvite?.signUrl;
                 dis.dispatch({
-                    action: 'join_room',
+                    action: Action.JoinRoom,
+                    roomId: this.getRoomId(),
                     opts: { inviteSignUrl: signUrl },
                     _type: "unknown", // TODO: instrumentation
                 });
@@ -1211,7 +1295,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             });
     }
 
-    private onSearch = (term: string, scope) => {
+    private onSearch = (term: string, scope: SearchScope) => {
         this.setState({
             searchTerm: term,
             searchScope: scope,
@@ -1232,7 +1316,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.searchId = new Date().getTime();
 
         let roomId;
-        if (scope === "Room") roomId = this.state.room.roomId;
+        if (scope === SearchScope.Room) roomId = this.state.room.roomId;
 
         debuglog("sending search request");
         const searchPromise = eventSearch(term, roomId);
@@ -1375,13 +1459,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         return ret;
     }
 
-    private onPinnedClick = () => {
-        const nowShowingPinned = !this.state.showingPinned;
-        const roomId = this.state.room.roomId;
-        this.setState({showingPinned: nowShowingPinned, searching: false});
-        SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
-    };
-
     private onCallPlaced = (type: PlaceCallType) => {
         dis.dispatch({
             action: 'place_call',
@@ -1394,18 +1471,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         dis.dispatch({ action: "open_room_settings" });
     };
 
-    private onCancelClick = () => {
-        console.log("updateTint from onCancelClick");
-        this.updateTint();
-        if (this.state.forwardingEvent) {
-            dis.dispatch({
-                action: 'forward_event',
-                event: null,
-            });
-        }
-        dis.fire(Action.FocusComposer);
-    };
-
     private onAppsClick = () => {
         dis.dispatch({
             action: "appsDrawer",
@@ -1498,7 +1563,6 @@ export default class RoomView extends React.Component<IProps, IState> {
     private onSearchClick = () => {
         this.setState({
             searching: !this.state.searching,
-            showingPinned: false,
         });
     };
 
@@ -1511,8 +1575,19 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     // jump down to the bottom of this room, where new events are arriving
     private jumpToLiveTimeline = () => {
-        this.messagePanel.jumpToLiveTimeline();
-        dis.fire(Action.FocusComposer);
+        if (this.state.initialEventId && this.state.isInitialEventHighlighted) {
+            // If we were viewing a highlighted event, firing view_room without
+            // an event will take care of both clearing the URL fragment and
+            // jumping to the bottom
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.room.roomId,
+            });
+        } else {
+            // Otherwise we have to jump manually
+            this.messagePanel.jumpToLiveTimeline();
+            dis.fire(Action.FocusComposer);
+        }
     };
 
     // jump up to wherever our read marker is
@@ -1585,59 +1660,30 @@ export default class RoomView extends React.Component<IProps, IState> {
         // a maxHeight on the underlying remote video tag.
 
         // header + footer + status + give us at least 120px of scrollback at all times.
-        let auxPanelMaxHeight = window.innerHeight -
+        let auxPanelMaxHeight = UIStore.instance.windowHeight -
                 (54 + // height of RoomHeader
                  36 + // height of the status area
-                 51 + // minimum height of the message compmoser
+                 51 + // minimum height of the message composer
                  120); // amount of desired scrollback
 
         // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
         // but it's better than the video going missing entirely
         if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
 
-        this.setState({auxPanelMaxHeight: auxPanelMaxHeight});
-    };
-
-    private onFullscreenClick = () => {
-        dis.dispatch({
-            action: 'video_fullscreen',
-            fullscreen: true,
-        }, true);
-    };
-
-    private onMuteAudioClick = () => {
-        const call = this.getCallForRoom();
-        if (!call) {
-            return;
+        if (this.state.auxPanelMaxHeight !== auxPanelMaxHeight) {
+            this.setState({ auxPanelMaxHeight });
         }
-        const newState = !call.isMicrophoneMuted();
-        call.setMicrophoneMuted(newState);
-        this.forceUpdate(); // TODO: just update the voip buttons
-    };
-
-    private onMuteVideoClick = () => {
-        const call = this.getCallForRoom();
-        if (!call) {
-            return;
-        }
-        const newState = !call.isLocalVideoMuted();
-        call.setLocalVideoMuted(newState);
-        this.forceUpdate(); // TODO: just update the voip buttons
     };
 
     private onStatusBarVisible = () => {
-        if (this.unmounted) return;
-        this.setState({
-            statusBarVisible: true,
-        });
+        if (this.unmounted || this.state.statusBarVisible) return;
+        this.setState({ statusBarVisible: true });
     };
 
     private onStatusBarHidden = () => {
         // This is currently not desired as it is annoying if it keeps expanding and collapsing
-        if (this.unmounted) return;
-        this.setState({
-            statusBarVisible: false,
-        });
+        if (this.unmounted || !this.state.statusBarVisible) return;
+        this.setState({ statusBarVisible: false });
     };
 
     /**
@@ -1856,11 +1902,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         let aux = null;
         let previewBar;
-        let hideCancel = false;
-        if (this.state.forwardingEvent) {
-            aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
-        } else if (this.state.searching) {
-            hideCancel = true; // has own cancel
+        if (this.state.searching) {
             aux = <SearchBar
                 searchInProgress={this.state.searchInProgress}
                 onCancelClick={this.onCancelSearchClick}
@@ -1869,10 +1911,6 @@ export default class RoomView extends React.Component<IProps, IState> {
             />;
         } else if (showRoomUpgradeBar) {
             aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
-            hideCancel = true;
-        } else if (this.state.showingPinned) {
-            hideCancel = true; // has own cancel
-            aux = <PinnedEventsPanel room={this.state.room} onCancelClick={this.onPinnedClick} />;
         } else if (myMembership !== "join") {
             // We do have a room object for this room, but we're not currently in it.
             // We may have a 3rd party invite to it.
@@ -1881,7 +1919,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 inviterName = this.props.oobData.inviterName;
             }
             const invitedEmail = this.props.threepidInvite?.toEmail;
-            hideCancel = true;
             previewBar = (
                 <RoomPreviewBar
                     onJoinClick={this.onJoinButtonClicked}
@@ -1917,7 +1954,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             );
         }
 
-        if (SettingsStore.getValue("feature_spaces") && this.state.room?.isSpaceRoom()) {
+        if (this.state.room?.isSpaceRoom()) {
             return <SpaceRoomView
                 space={this.state.room}
                 justCreatedOpts={this.props.justCreatedOpts}
@@ -1999,11 +2036,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             hideMessagePanel = true;
         }
 
-        const shouldHighlight = this.state.isInitialEventHighlighted;
         let highlightedEventId = null;
-        if (this.state.forwardingEvent) {
-            highlightedEventId = this.state.forwardingEvent.getId();
-        } else if (shouldHighlight) {
+        if (this.state.isInitialEventHighlighted) {
             highlightedEventId = this.state.initialEventId;
         }
 
@@ -2028,6 +2062,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 eventId={this.state.initialEventId}
                 eventPixelOffset={this.state.initialEventPixelOffset}
                 onScroll={this.onMessageListScroll}
+                onUserScroll={this.onUserScroll}
                 onReadMarkerUpdated={this.updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
                 className={messagePanelClassNames}
@@ -2036,6 +2071,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 resizeNotifier={this.props.resizeNotifier}
                 showReactions={true}
                 layout={this.state.layout}
+                editState={this.state.editState}
             />);
 
         let topUnreadMessagesBar = null;
@@ -2051,9 +2087,10 @@ export default class RoomView extends React.Component<IProps, IState> {
         if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
             const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
             jumpToBottom = (<JumpToBottomButton
-                highlight={this.state.room.getUnreadNotificationCount('highlight') > 0}
+                highlight={this.state.room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0}
                 numUnreadMessages={this.state.numUnreadMessages}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
+                roomId={this.state.roomId}
             />);
         }
 
@@ -2090,8 +2127,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                             inRoom={myMembership === 'join'}
                             onSearchClick={this.onSearchClick}
                             onSettingsClick={this.onSettingsClick}
-                            onPinnedClick={this.onPinnedClick}
-                            onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
                             onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                             onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                             e2eStatus={this.state.e2eStatus}

src/components/structures/ScrollPanel.js

@@ -133,6 +133,10 @@ export default class ScrollPanel extends React.Component {
          */
         onScroll: PropTypes.func,
 
+        /* onUserScroll: callback which is called when the user interacts with the room timeline
+         */
+        onUserScroll: PropTypes.func,
+
         /* className: classnames to add to the top-level div
          */
         className: PropTypes.string,
@@ -535,21 +539,29 @@ export default class ScrollPanel extends React.Component {
      * @param {object} ev the keyboard event
      */
     handleScrollKey = ev => {
+        let isScrolling = false;
         const roomAction = getKeyBindingsManager().getRoomAction(ev);
         switch (roomAction) {
             case RoomAction.ScrollUp:
                 this.scrollRelative(-1);
+                isScrolling = true;
                 break;
             case RoomAction.RoomScrollDown:
                 this.scrollRelative(1);
+                isScrolling = true;
                 break;
             case RoomAction.JumpToFirstMessage:
                 this.scrollToTop();
+                isScrolling = true;
                 break;
             case RoomAction.JumpToLatestMessage:
                 this.scrollToBottom();
+                isScrolling = true;
                 break;
         }
+        if (isScrolling && this.props.onUserScroll) {
+            this.props.onUserScroll(ev);
+        }
     };
 
     /* Scroll the panel to bring the DOM node with the scroll token
@@ -888,9 +900,8 @@ export default class ScrollPanel extends React.Component {
             <AutoHideScrollbar
                 wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
-                className={`mx_ScrollPanel ${this.props.className}`}
-                style={this.props.style}
-            >
+                onWheel={this.props.onUserScroll}
+                className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
                 { this.props.fixedChildren }
                 <div className="mx_RoomView_messageListWrapper">
                     <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">

src/components/structures/SpaceRoomDirectory.tsx

@@ -14,33 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode, useMemo, useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import React, { ReactNode, useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import classNames from "classnames";
-import {sortBy} from "lodash";
+import { sortBy } from "lodash";
 
-import {MatrixClientPeg} from "../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
-import {_t} from "../../languageHandler";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import { _t } from "../../languageHandler";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
 import RoomAvatar from "../views/avatars/RoomAvatar";
 import RoomName from "../views/elements/RoomName";
-import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {EnhancedMap} from "../../utils/maps";
+import { useAsyncMemo } from "../../hooks/useAsyncMemo";
+import { EnhancedMap } from "../../utils/maps";
 import StyledCheckbox from "../views/elements/StyledCheckbox";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import BaseAvatar from "../views/avatars/BaseAvatar";
-import {mediaFromMxc} from "../../customisations/Media";
+import { mediaFromMxc } from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
-import {useStateToggle} from "../../hooks/useStateToggle";
-import {getOrder} from "../../stores/SpaceStore";
+import { useStateToggle } from "../../hooks/useStateToggle";
+import { getChildOrder } from "../../stores/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+import { linkifyElement } from "../../HtmlUtils";
 
 interface IHierarchyProps {
     space: Room;
@@ -75,7 +76,7 @@ export interface ISpaceSummaryEvent {
         order?: string;
         suggested?: boolean;
         auto_join?: boolean;
-        via?: string;
+        via?: string[];
     };
 }
 /* eslint-enable camelcase */
@@ -100,15 +101,13 @@ const Tile: React.FC<ITileProps> = ({
     numChildRooms,
     children,
 }) => {
-    const name = room.name || room.canonical_alias || room.aliases?.[0]
+    const cli = MatrixClientPeg.get();
+    const joinedRoom = cli.getRoom(room.room_id)?.getMyMembership() === "join" ? cli.getRoom(room.room_id) : null;
+    const name = joinedRoom?.name || room.name || room.canonical_alias || room.aliases?.[0]
         || (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room"));
 
     const [showChildren, toggleShowChildren] = useStateToggle(true);
 
-    const cli = MatrixClientPeg.get();
-    const cliRoom = cli.getRoom(room.room_id);
-    const myMembership = cliRoom?.getMyMembership();
-
     const onPreviewClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -121,7 +120,7 @@ const Tile: React.FC<ITileProps> = ({
     }
 
     let button;
-    if (myMembership === "join") {
+    if (joinedRoom) {
         button = <AccessibleButton onClick={onPreviewClick} kind="primary_outline">
             { _t("View") }
         </AccessibleButton>;
@@ -145,17 +144,27 @@ const Tile: React.FC<ITileProps> = ({
         }
     }
 
-    let url: string;
-    if (room.avatar_url) {
-        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20);
+    let avatar;
+    if (joinedRoom) {
+        avatar = <RoomAvatar room={joinedRoom} width={20} height={20} />;
+    } else {
+        avatar = <BaseAvatar
+            name={name}
+            idName={room.room_id}
+            url={room.avatar_url ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20) : null}
+            width={20}
+            height={20}
+        />;
     }
 
     let description = _t("%(count)s members", { count: room.num_joined_members });
-    if (numChildRooms) {
+    if (numChildRooms !== undefined) {
         description += " · " + _t("%(count)s rooms", { count: numChildRooms });
     }
-    if (room.topic) {
-        description += " · " + room.topic;
+
+    const topic = joinedRoom?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || room.topic;
+    if (topic) {
+        description += " · " + topic;
     }
 
     let suggestedSection;
@@ -166,13 +175,22 @@ const Tile: React.FC<ITileProps> = ({
     }
 
     const content = <React.Fragment>
-        <BaseAvatar name={name} idName={room.room_id} url={url} width={20} height={20} />
+        { avatar }
         <div className="mx_SpaceRoomDirectory_roomTile_name">
             { name }
             { suggestedSection }
         </div>
 
-        <div className="mx_SpaceRoomDirectory_roomTile_info">
+        <div
+            className="mx_SpaceRoomDirectory_roomTile_info"
+            ref={e => e && linkifyElement(e)}
+            onClick={ev => {
+                // prevent clicks on links from bubbling up to the room tile
+                if ((ev.target as HTMLElement).tagName === "A") {
+                    ev.stopPropagation();
+                }
+            }}
+        >
             { description }
         </div>
         <div className="mx_SpaceRoomDirectory_actions">
@@ -268,7 +286,7 @@ export const HierarchyLevel = ({
     const children = Array.from(relations.get(spaceId)?.values() || []);
     const sortedChildren = sortBy(children, ev => {
         // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
-        return getOrder(ev.content.order, null, ev.state_key);
+        return getChildOrder(ev.content.order, null, ev.state_key);
     });
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
         const roomId = ev.state_key;
@@ -301,7 +319,7 @@ export const HierarchyLevel = ({
                     key={roomId}
                     room={rooms.get(roomId)}
                     numChildRooms={Array.from(relations.get(roomId)?.values() || [])
-                        .filter(ev => rooms.get(ev.state_key)?.room_type !== RoomType.Space).length}
+                        .filter(ev => rooms.has(ev.state_key) && !rooms.get(ev.state_key).room_type).length}
                     suggested={relations.get(spaceId)?.get(roomId)?.content.suggested}
                     selected={selectedMap?.get(spaceId)?.has(roomId)}
                     onViewRoomClick={(autoJoin) => {
@@ -346,9 +364,9 @@ export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: a
                     parentChildRelations.getOrCreate(ev.room_id, new Map()).set(ev.state_key, ev);
                     childParentRelations.getOrCreate(ev.state_key, new Set()).add(ev.room_id);
                 }
-                if (Array.isArray(ev.content["via"])) {
+                if (Array.isArray(ev.content.via)) {
                     const set = viaMap.getOrCreate(ev.state_key, new Set());
-                    ev.content["via"].forEach(via => set.add(via));
+                    ev.content.via.forEach(via => set.add(via));
                 }
             });
 
@@ -419,7 +437,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
 
     let content;
     if (roomsMap) {
-        const numRooms = Array.from(roomsMap.values()).filter(r => r.room_type !== RoomType.Space).length;
+        const numRooms = Array.from(roomsMap.values()).filter(r => !r.room_type).length;
         const numSpaces = roomsMap.size - numRooms - 1; // -1 at the end to exclude the space we are looking at
 
         let countsStr;
@@ -461,8 +479,12 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
                         try {
                             for (const [parentId, childId] of selectedRelations) {
                                 await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
-                                parentChildMap.get(parentId).get(childId).content = {};
-                                parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                parentChildMap.get(parentId).delete(childId);
+                                if (parentChildMap.get(parentId).size > 0) {
+                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                                } else {
+                                    parentChildMap.delete(parentId);
+                                }
                             }
                         } catch (e) {
                             setError(_t("Failed to remove some rooms. Try again later"));
@@ -498,6 +520,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
                             setError("Failed to update some suggestions. Try again later");
                         }
                         setSaving(false);
+                        setSelected(new Map());
                     }}
                     kind="primary_outline"
                     disabled={disabled}
@@ -574,7 +597,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     return <>
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Search names and description") }
+            placeholder={ _t("Search names and descriptions") }
             onSearch={setQuery}
             autoFocus={true}
             initialValue={initialText}

src/components/structures/SpaceRoomView.tsx

@@ -14,52 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {RefObject, useContext, useRef, useState} from "react";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {EventSubscription} from "fbemitter";
+import React, { RefObject, useContext, useRef, useState } from "react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { Preset } from "matrix-js-sdk/src/@types/partials";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventSubscription } from "fbemitter";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import RoomAvatar from "../views/avatars/RoomAvatar";
-import {_t} from "../../languageHandler";
+import { _t } from "../../languageHandler";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
 import InlineSpinner from "../views/elements/InlineSpinner";
-import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
-import {useRoomMembers} from "../../hooks/useRoomMembers";
-import createRoom, {IOpts, Preset} from "../../createRoom";
+import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
+import { useRoomMembers } from "../../hooks/useRoomMembers";
+import createRoom, { IOpts } from "../../createRoom";
 import Field from "../views/elements/Field";
-import {useEventEmitter} from "../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../hooks/useEventEmitter";
 import withValidation from "../views/elements/Validation";
 import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import {Action} from "../../dispatcher/actions";
+import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
 import ResizeNotifier from "../../utils/ResizeNotifier"
 import MainSplit from './MainSplit';
 import ErrorBoundary from "../views/elements/ErrorBoundary";
-import {ActionPayload} from "../../dispatcher/payloads";
+import { ActionPayload } from "../../dispatcher/payloads";
 import RightPanel from "./RightPanel";
 import RightPanelStore from "../../stores/RightPanelStore";
-import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
-import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
-import {useStateArray} from "../../hooks/useStateArray";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import { SetRightPanelPhasePayload } from "../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { useStateArray } from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
-import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
-import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory";
+import { shouldShowSpaceSettings, showAddExistingRooms, showCreateNewRoom, showSpaceSettings } from "../../utils/space";
+import { showRoom, SpaceHierarchy } from "./SpaceRoomDirectory";
 import MemberAvatar from "../views/avatars/MemberAvatar";
-import {useStateToggle} from "../../hooks/useStateToggle";
+import { useStateToggle } from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
 import FacePile from "../views/elements/FacePile";
-import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
-import {sleep} from "../../utils/promise";
-import {calculateRoomVia} from "../../utils/permalinks/Permalinks";
-import {ChevronFace, ContextMenuButton, useContextMenu} from "./ContextMenu";
+import { AddExistingToSpace } from "../views/dialogs/AddExistingToSpaceDialog";
+import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../views/context_menus/IconizedContextMenu";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+import { BetaPill } from "../views/beta/BetaCard";
+import { UserTab } from "../views/dialogs/UserSettingsDialog";
+import SettingsStore from "../../settings/SettingsStore";
+import Modal from "../../Modal";
+import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../SdkConfig";
+import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
+import { JoinRule } from "../views/settings/tabs/room/SecurityRoomSettingsTab";
 
 interface IProps {
     space: Room;
@@ -71,6 +79,7 @@ interface IProps {
 
 interface IState {
     phase: Phase;
+    createdRooms?: boolean; // internal state for the creation wizard
     showRightPanel: boolean;
     myMembership: string;
 }
@@ -85,6 +94,26 @@ enum Phase {
     PrivateExistingRooms,
 }
 
+// XXX: Temporary for the Spaces Beta only
+export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
+    if (!SdkConfig.get().bug_report_endpoint_url) return null;
+
+    return <div className="mx_SpaceFeedbackPrompt">
+        <hr />
+        <div>
+            <span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a beta feature.") }</span>
+            <AccessibleButton kind="link" onClick={() => {
+                if (onClick) onClick();
+                Modal.createTrackedDialog("Beta Feedback", "feature_spaces", BetaFeedbackDialog, {
+                    featureId: "feature_spaces",
+                });
+            }}>
+                { _t("Feedback") }
+            </AccessibleButton>
+        </div>
+    </div>;
+};
+
 const RoomMemberCount = ({ room, children }) => {
     const members = useRoomMembers(room);
     const count = members.length;
@@ -136,15 +165,42 @@ const SpaceInfo = ({ space }) => {
     </div>
 };
 
+const onBetaClick = () => {
+    defaultDispatcher.dispatch({
+        action: Action.ViewUserSettings,
+        initialTabId: UserTab.Labs,
+    });
+};
+
 const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
 
     const [busy, setBusy] = useState(false);
 
+    const spacesEnabled = SettingsStore.getValue("feature_spaces");
+
+    const cannotJoin = getEffectiveMembership(myMembership) === EffectiveMembership.Leave
+        && space.getJoinRule() !== JoinRule.Public;
+
     let inviterSection;
     let joinButtons;
-    if (myMembership === "invite") {
+    if (myMembership === "join") {
+        // XXX remove this when spaces leaves Beta
+        joinButtons = (
+            <AccessibleButton
+                kind="danger_outline"
+                onClick={() => {
+                    dis.dispatch({
+                        action: "leave_room",
+                        room_id: space.roomId,
+                    });
+                }}
+            >
+                { _t("Leave") }
+            </AccessibleButton>
+        );
+    } else if (myMembership === "invite") {
         const inviteSender = space.getMember(cli.getUserId())?.events.member?.getSender();
         const inviter = inviteSender && space.getMember(inviteSender);
 
@@ -180,6 +236,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                     setBusy(true);
                     onJoinButtonClicked();
                 }}
+                disabled={!spacesEnabled}
             >
                 { _t("Accept") }
             </AccessibleButton>
@@ -192,17 +249,43 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                     setBusy(true);
                     onJoinButtonClicked();
                 }}
+                disabled={!spacesEnabled || cannotJoin}
             >
                 { _t("Join") }
             </AccessibleButton>
-        )
+        );
     }
 
     if (busy) {
         joinButtons = <InlineSpinner />;
     }
 
+    let footer;
+    if (!spacesEnabled) {
+        footer = <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
+            { myMembership === "join"
+                ? _t("To view %(spaceName)s, turn on the <a>Spaces beta</a>", {
+                    spaceName: space.name,
+                }, {
+                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
+                })
+                : _t("To join %(spaceName)s, turn on the <a>Spaces beta</a>", {
+                    spaceName: space.name,
+                }, {
+                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
+                })
+            }
+        </div>;
+    } else if (cannotJoin) {
+        footer = <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
+            { _t("To view %(spaceName)s, you need an invite", {
+                spaceName: space.name,
+            }) }
+        </div>;
+    }
+
     return <div className="mx_SpaceRoomView_preview">
+        <BetaPill onClick={onBetaClick} />
         { inviterSection }
         <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
         <h1 className="mx_SpaceRoomView_preview_name">
@@ -220,6 +303,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>
+        { footer }
     </div>;
 };
 
@@ -350,9 +434,14 @@ const SpaceLanding = ({ space }) => {
             { inviteButton }
             { settingsButton }
         </div>
-        <div className="mx_SpaceRoomView_landing_topic">
-            <RoomTopic room={space} />
-        </div>
+        <RoomTopic room={space}>
+            {(topic, ref) => (
+                <div className="mx_SpaceRoomView_landing_topic" ref={ref}>
+                    { topic }
+                </div>
+            )}
+        </RoomTopic>
+        <SpaceFeedbackPrompt />
         <hr />
 
         <SpaceHierarchy
@@ -369,7 +458,6 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     const [error, setError] = useState("");
     const numFields = 3;
     const placeholders = [_t("General"), _t("Random"), _t("Support")];
-    // TODO vary default prefills for "Just Me" spaces
     const [roomNames, setRoomName] = useStateArray(numFields, [_t("General"), _t("Random"), ""]);
     const fields = new Array(numFields).fill(0).map((_, i) => {
         const name = "roomName" + i;
@@ -382,14 +470,18 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
             value={roomNames[i]}
             onChange={ev => setRoomName(i, ev.target.value)}
             autoFocus={i === 2}
+            disabled={busy}
         />;
     });
 
-    const onNextClick = async () => {
+    const onNextClick = async (ev) => {
+        ev.preventDefault();
+        if (busy) return;
         setError("");
         setBusy(true);
         try {
-            await Promise.all(roomNames.map(name => name.trim()).filter(Boolean).map(name => {
+            const filteredRoomNames = roomNames.map(name => name.trim()).filter(Boolean);
+            await Promise.all(filteredRoomNames.map(name => {
                 return createRoom({
                     createOpts: {
                         preset: space.getJoinRule() === "public" ? Preset.PublicChat : Preset.PrivateChat,
@@ -402,7 +494,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
                     parentSpace: space,
                 });
             }));
-            onFinished();
+            onFinished(filteredRoomNames.length > 0);
         } catch (e) {
             console.error("Failed to create initial space rooms", e);
             setError(_t("Failed to create initial space rooms"));
@@ -410,7 +502,10 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
         setBusy(false);
     };
 
-    let onClick = onFinished;
+    let onClick = (ev) => {
+        ev.preventDefault();
+        onFinished(false);
+    };
     let buttonLabel = _t("Skip for now");
     if (roomNames.some(name => name.trim())) {
         onClick = onNextClick;
@@ -422,54 +517,26 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
         <div className="mx_SpaceRoomView_description">{ description }</div>
 
         { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-        { fields }
+        <form onSubmit={onClick} id="mx_SpaceSetupFirstRooms">
+            { fields }
+        </form>
 
         <div className="mx_SpaceRoomView_buttons">
             <AccessibleButton
                 kind="primary"
                 disabled={busy}
                 onClick={onClick}
-            >
-                { buttonLabel }
-            </AccessibleButton>
+                element="input"
+                type="submit"
+                form="mx_SpaceSetupFirstRooms"
+                value={buttonLabel}
+            />
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
 const SpaceAddExistingRooms = ({ space, onFinished }) => {
-    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-
-    let onClick = onFinished;
-    let buttonLabel = _t("Skip for now");
-    if (selectedToAdd.size > 0) {
-        onClick = async () => {
-            setBusy(true);
-
-            for (const room of selectedToAdd) {
-                const via = calculateRoomVia(room);
-                try {
-                    await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
-                        if (e.errcode === "M_LIMIT_EXCEEDED") {
-                            await sleep(e.data.retry_after_ms);
-                            return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
-                        }
-
-                        throw e;
-                    });
-                } catch (e) {
-                    console.error("Failed to add rooms to space", e);
-                    setError(_t("Failed to add rooms to space"));
-                    break;
-                }
-            }
-            setBusy(false);
-        };
-        buttonLabel = busy ? _t("Adding...") : _t("Add");
-    }
-
     return <div>
         <h1>{ _t("What do you want to organise?") }</h1>
         <div className="mx_SpaceRoomView_description">
@@ -477,36 +544,28 @@ const SpaceAddExistingRooms = ({ space, onFinished }) => {
                 "no one will be informed. You can add more later.") }
         </div>
 
-        { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-
         <AddExistingToSpace
             space={space}
-            selected={selectedToAdd}
-            onChange={(checked, room) => {
-                if (checked) {
-                    selectedToAdd.add(room);
-                } else {
-                    selectedToAdd.delete(room);
-                }
-                setSelectedToAdd(new Set(selectedToAdd));
-            }}
+            emptySelectionButton={
+                <AccessibleButton kind="primary" onClick={onFinished}>
+                    { _t("Skip for now") }
+                </AccessibleButton>
+            }
+            onFinished={onFinished}
         />
 
         <div className="mx_SpaceRoomView_buttons">
-            <AccessibleButton
-                kind="primary"
-                disabled={busy}
-                onClick={onClick}
-            >
-                { buttonLabel }
-            </AccessibleButton>
+
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
-const SpaceSetupPublicShare = ({ space, onFinished }) => {
+const SpaceSetupPublicShare = ({ justCreatedOpts, space, onFinished, createdRooms }) => {
     return <div className="mx_SpaceRoomView_publicShare">
-        <h1>{ _t("Share %(name)s", { name: space.name }) }</h1>
+        <h1>{ _t("Share %(name)s", {
+            name: justCreatedOpts?.createOpts?.name || space.name,
+        }) }</h1>
         <div className="mx_SpaceRoomView_description">
             { _t("It's just you at the moment, it will be even better with others.") }
         </div>
@@ -515,17 +574,20 @@ const SpaceSetupPublicShare = ({ space, onFinished }) => {
 
         <div className="mx_SpaceRoomView_buttons">
             <AccessibleButton kind="primary" onClick={onFinished}>
-                { _t("Go to my first room") }
+                { createdRooms ? _t("Go to my first room") : _t("Go to my space") }
             </AccessibleButton>
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
-const SpaceSetupPrivateScope = ({ space, onFinished }) => {
+const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
     return <div className="mx_SpaceRoomView_privateScope">
         <h1>{ _t("Who are you working with?") }</h1>
         <div className="mx_SpaceRoomView_description">
-            { _t("Make sure the right people have access to %(name)s", { name: space.name }) }
+            { _t("Make sure the right people have access to %(name)s", {
+                name: justCreatedOpts?.createOpts?.name || space.name,
+            }) }
         </div>
 
         <AccessibleButton
@@ -542,6 +604,11 @@ const SpaceSetupPrivateScope = ({ space, onFinished }) => {
             <h3>{ _t("Me and my teammates") }</h3>
             <div>{ _t("A private space for you and your teammates") }</div>
         </AccessibleButton>
+        <div className="mx_SpaceRoomView_betaWarning">
+            <h3>{ _t("Teammates might not be able to view or join any private rooms you make.") }</h3>
+            <p>{ _t("We're working on this as part of the beta, but just want to let you know.") }</p>
+        </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -572,10 +639,13 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
             ref={fieldRefs[i]}
             onValidate={validateEmailRules}
             autoFocus={i === 0}
+            disabled={busy}
         />;
     });
 
-    const onNextClick = async () => {
+    const onNextClick = async (ev) => {
+        ev.preventDefault();
+        if (busy) return;
         setError("");
         for (let i = 0; i < fieldRefs.length; i++) {
             const fieldRef = fieldRefs[i];
@@ -609,7 +679,10 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         setBusy(false);
     };
 
-    let onClick = onFinished;
+    let onClick = (ev) => {
+        ev.preventDefault();
+        onFinished();
+    };
     let buttonLabel = _t("Skip for now");
     if (emailAddresses.some(name => name.trim())) {
         onClick = onNextClick;
@@ -622,8 +695,21 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
             { _t("Make sure the right people have access. You can invite more later.") }
         </div>
 
+        <div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
+            <BetaPill onClick={onBetaClick} />
+            { _t("<b>This is an experimental feature.</b> For now, " +
+                "new users receiving an invite will have to open the invite on <link/> to actually join.", {}, {
+                b: sub => <b>{ sub }</b>,
+                link: () => <a href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
+                    app.element.io
+                </a>,
+            }) }
+        </div>
+
         { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-        { fields }
+        <form onSubmit={onClick} id="mx_SpaceSetupPrivateInvite">
+            { fields }
+        </form>
 
         <div className="mx_SpaceRoomView_inviteTeammates_buttons">
             <AccessibleButton
@@ -635,10 +721,17 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         </div>
 
         <div className="mx_SpaceRoomView_buttons">
-            <AccessibleButton kind="primary" disabled={busy} onClick={onClick}>
-                { buttonLabel }
-            </AccessibleButton>
+            <AccessibleButton
+                kind="primary"
+                disabled={busy}
+                onClick={onClick}
+                element="input"
+                type="submit"
+                form="mx_SpaceSetupPrivateInvite"
+                value={buttonLabel}
+            />
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -737,7 +830,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
         let suggestedRooms = SpaceStore.instance.suggestedRooms;
         if (SpaceStore.instance.activeSpace !== this.props.space) {
             // the space store has the suggested rooms loaded for a different space, fetch the right ones
-            suggestedRooms = (await SpaceStore.instance.fetchSuggestedRooms(this.props.space, 1)).rooms;
+            suggestedRooms = (await SpaceStore.instance.fetchSuggestedRooms(this.props.space, 1));
         }
 
         if (suggestedRooms.length) {
@@ -745,9 +838,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
             defaultDispatcher.dispatch({
                 action: "view_room",
                 room_id: room.room_id,
+                room_alias: room.canonical_alias || room.aliases?.[0],
+                via_servers: room.viaServers,
                 oobData: {
                     avatarUrl: room.avatar_url,
-                    name: room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room"),
+                    name: room.name || room.canonical_alias || room.aliases?.[0] || _t("Empty room"),
                 },
             });
             return;
@@ -759,7 +854,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     private renderBody() {
         switch (this.state.phase) {
             case Phase.Landing:
-                if (this.state.myMembership === "join") {
+                if (this.state.myMembership === "join" && SettingsStore.getValue("feature_spaces")) {
                     return <SpaceLanding space={this.props.space} />;
                 } else {
                     return <SpacePreview
@@ -772,20 +867,26 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
                 return <SpaceSetupFirstRooms
                     space={this.props.space}
                     title={_t("What are some things you want to discuss in %(spaceName)s?", {
-                        spaceName: this.props.space.name,
+                        spaceName: this.props.justCreatedOpts?.createOpts?.name || this.props.space.name,
                     })}
                     description={
                         _t("Let's create a room for each of them.") + "\n" +
                         _t("You can add more later too, including already existing ones.")
                     }
-                    onFinished={() => this.setState({ phase: Phase.PublicShare })}
+                    onFinished={(createdRooms: boolean) => this.setState({ phase: Phase.PublicShare, createdRooms })}
                 />;
             case Phase.PublicShare:
-                return <SpaceSetupPublicShare space={this.props.space} onFinished={this.goToFirstRoom} />;
+                return <SpaceSetupPublicShare
+                    justCreatedOpts={this.props.justCreatedOpts}
+                    space={this.props.space}
+                    onFinished={this.goToFirstRoom}
+                    createdRooms={this.state.createdRooms}
+                />;
 
             case Phase.PrivateScope:
                 return <SpaceSetupPrivateScope
                     space={this.props.space}
+                    justCreatedOpts={this.props.justCreatedOpts}
                     onFinished={(invite: boolean) => {
                         this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateExistingRooms });
                     }}
@@ -801,7 +902,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
                     title={_t("What projects are you working on?")}
                     description={_t("We'll create rooms for each of them. " +
                         "You can add more later too, including already existing ones.")}
-                    onFinished={() => this.setState({ phase: Phase.Landing })}
+                    onFinished={(createdRooms: boolean) => this.setState({ phase: Phase.Landing, createdRooms })}
                 />;
             case Phase.PrivateExistingRooms:
                 return <SpaceAddExistingRooms

src/components/structures/TimelinePanel.js

@@ -18,14 +18,15 @@ limitations under the License.
 */
 
 import SettingsStore from "../../settings/SettingsStore";
-import {LayoutPropType} from "../../settings/Layout";
-import React, {createRef} from 'react';
+import { LayoutPropType } from "../../settings/Layout";
+import React, { createRef } from 'react';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
-import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
+import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
 import { _t } from '../../languageHandler';
-import {MatrixClientPeg} from "../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import RoomContext from "../../contexts/RoomContext";
 import UserActivity from "../../UserActivity";
 import Modal from "../../Modal";
 import dis from "../../dispatcher/dispatcher";
@@ -33,11 +34,10 @@ import * as sdk from "../../index";
 import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
-import EditorStateTransfer from '../../utils/EditorStateTransfer';
-import {haveTileForEvent} from "../views/rooms/EventTile";
-import {UIFeature} from "../../settings/UIFeature";
-import {objectHasDiff} from "../../utils/objects";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { haveTileForEvent } from "../views/rooms/EventTile";
+import { UIFeature } from "../../settings/UIFeature";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { arrayFastClone } from "../../utils/arrays";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -70,6 +70,8 @@ class TimelinePanel extends React.Component {
         manageReadReceipts: PropTypes.bool,
         sendReadReceiptOnLoad: PropTypes.bool,
         manageReadMarkers: PropTypes.bool,
+        // with this enabled it'll listen and react to Action.ComposerInsert and `edit_event`
+        manageComposerDispatches: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
         hidden: PropTypes.bool,
@@ -93,6 +95,9 @@ class TimelinePanel extends React.Component {
         // callback which is called when the panel is scrolled.
         onScroll: PropTypes.func,
 
+        // callback which is called when the user interacts with the room timeline
+        onUserScroll: PropTypes.func,
+
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: PropTypes.func,
 
@@ -117,8 +122,13 @@ class TimelinePanel extends React.Component {
 
         // which layout to use
         layout: LayoutPropType,
+
+        // whether to always show timestamps for an event
+        alwaysShowTimestamps: PropTypes.bool,
     }
 
+    static contextType = RoomContext;
+
     // a map from room id to read marker event timestamp
     static roomReadMarkerTsMap = {};
 
@@ -257,37 +267,15 @@ class TimelinePanel extends React.Component {
             console.warn("Replacing timelineSet on a TimelinePanel - confusion may ensue");
         }
 
-        if (newProps.eventId != this.props.eventId) {
+        const differentEventId = newProps.eventId != this.props.eventId;
+        const differentHighlightedEventId = newProps.highlightedEventId != this.props.highlightedEventId;
+        if (differentEventId || differentHighlightedEventId) {
             console.log("TimelinePanel switching to eventId " + newProps.eventId +
                         " (was " + this.props.eventId + ")");
             return this._initTimeline(newProps);
         }
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        if (objectHasDiff(this.props, nextProps)) {
-            if (DEBUG) {
-                console.group("Timeline.shouldComponentUpdate: props change");
-                console.log("props before:", this.props);
-                console.log("props after:", nextProps);
-                console.groupEnd();
-            }
-            return true;
-        }
-
-        if (objectHasDiff(this.state, nextState)) {
-            if (DEBUG) {
-                console.group("Timeline.shouldComponentUpdate: state change");
-                console.log("state before:", this.state);
-                console.log("state after:", nextState);
-                console.groupEnd();
-            }
-            return true;
-        }
-
-        return false;
-    }
-
     componentWillUnmount() {
         // set a boolean to say we've been unmounted, which any pending
         // promises can use to throw away their results.
@@ -452,21 +440,10 @@ class TimelinePanel extends React.Component {
     };
 
     onAction = payload => {
-        if (payload.action === 'ignore_state_changed') {
-            this.forceUpdate();
-        }
-        if (payload.action === "edit_event") {
-            const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
-            this.setState({editState}, () => {
-                if (payload.event && this._messagePanel.current) {
-                    this._messagePanel.current.scrollToEventIfNeeded(
-                        payload.event.getId(),
-                    );
-                }
-            });
-        }
-        if (payload.action === "scroll_to_bottom") {
-            this.jumpToLiveTimeline();
+        switch (payload.action) {
+            case "ignore_state_changed":
+                this.forceUpdate();
+                break;
         }
     };
 
@@ -857,6 +834,12 @@ class TimelinePanel extends React.Component {
         }
     };
 
+    scrollToEventIfNeeded = (eventId) => {
+        if (this._messagePanel.current) {
+            this._messagePanel.current.scrollToEventIfNeeded(eventId);
+        }
+    }
+
     /* scroll to show the read-up-to marker. We put it 1/3 of the way down
      * the container.
      */
@@ -1141,6 +1124,17 @@ class TimelinePanel extends React.Component {
     // get the list of events from the timeline window and the pending event list
     _getEvents() {
         const events = this._timelineWindow.getEvents();
+
+        // `arrayFastClone` performs a shallow copy of the array
+        // we want the last event to be decrypted first but displayed last
+        // `reverse` is destructive and unfortunately mutates the "events" array
+        arrayFastClone(events)
+            .reverse()
+            .forEach(event => {
+                const client = MatrixClientPeg.get();
+                client.decryptEventIfNeeded(event);
+            });
+
         const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
 
         // Hold onto the live events separately. The read receipt and read marker
@@ -1293,7 +1287,7 @@ class TimelinePanel extends React.Component {
 
             const shouldIgnore = !!ev.status || // local echo
                 (ignoreOwn && ev.sender && ev.sender.userId == myUserId);   // own message
-            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev);
+            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev, this.context);
 
             if (isWithoutTile || !node) {
                 // don't start counting if the event should be ignored,
@@ -1444,15 +1438,16 @@ class TimelinePanel extends React.Component {
                 ourUserId={MatrixClientPeg.get().credentials.userId}
                 stickyBottom={stickyBottom}
                 onScroll={this.onMessageListScroll}
+                onUserScroll={this.props.onUserScroll}
                 onFillRequest={this.onMessageListFillRequest}
                 onUnfillRequest={this.onMessageListUnfillRequest}
                 isTwelveHour={this.state.isTwelveHour}
-                alwaysShowTimestamps={this.state.alwaysShowTimestamps}
+                alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.alwaysShowTimestamps}
                 className={this.props.className}
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}
                 getRelationsForEvent={this.getRelationsForEvent}
-                editState={this.state.editState}
+                editState={this.props.editState}
                 showReactions={this.props.showReactions}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}

src/components/structures/ToastContainer.tsx

@@ -55,6 +55,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         const totalCount = this.state.toasts.length;
         const isStacked = totalCount > 1;
         let toast;
+        let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
             const {title, icon, key, component, className, props} = topToast;
@@ -79,16 +80,17 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 </div>
                 <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
             </div>);
+
+            containerClasses = classNames("mx_ToastContainer", {
+                "mx_ToastContainer_stacked": isStacked,
+            });
         }
-
-        const containerClasses = classNames("mx_ToastContainer", {
-            "mx_ToastContainer_stacked": isStacked,
-        });
-
-        return (
-            <div className={containerClasses} role="alert">
-                {toast}
-            </div>
-        );
+        return toast
+            ? (
+                <div className={containerClasses} role="alert">
+                    {toast}
+                </div>
+            )
+            : null;
     }
 }

src/components/structures/UserMenu.tsx

@@ -26,7 +26,7 @@ import { ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
 import { _t } from "../../languageHandler";
 import { ContextMenuButton } from "./ContextMenu";
-import { USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB } from "../views/dialogs/UserSettingsDialog";
+import { UserTab } from "../views/dialogs/UserSettingsDialog";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 import FeedbackDialog from "../views/dialogs/FeedbackDialog";
 import Modal from "../../Modal";
@@ -57,7 +57,8 @@ import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes";
 import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
 import RoomName from "../views/elements/RoomName";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-
+import InlineSpinner from "../views/elements/InlineSpinner";
+import TooltipButton from "../views/elements/TooltipButton";
 interface IProps {
     isMinimized: boolean;
 }
@@ -68,6 +69,7 @@ interface IState {
     contextMenuPosition: PartialDOMRect;
     isDarkTheme: boolean;
     selectedSpace?: Room;
+    pendingRoomJoin: Set<string>;
 }
 
 @replaceableComponent("structures.UserMenu")
@@ -84,6 +86,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.state = {
             contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),
+            pendingRoomJoin: new Set<string>(),
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -103,6 +106,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
         this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
+        MatrixClientPeg.get().on("Room", this.onRoom);
     }
 
     public componentWillUnmount() {
@@ -114,6 +118,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (SettingsStore.getValue("feature_spaces")) {
             SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
         }
+        MatrixClientPeg.get().removeListener("Room", this.onRoom);
+    }
+
+    private onRoom = (room: Room): void => {
+        this.removePendingJoinRoom(room.roomId);
     }
 
     private onTagStoreUpdate = () => {
@@ -147,15 +156,39 @@ export default class UserMenu extends React.Component<IProps, IState> {
     };
 
     private onAction = (ev: ActionPayload) => {
-        if (ev.action !== Action.ToggleUserMenu) return; // not interested
-
-        if (this.state.contextMenuPosition) {
-            this.setState({contextMenuPosition: null});
-        } else {
-            if (this.buttonRef.current) this.buttonRef.current.click();
+        switch (ev.action) {
+            case Action.ToggleUserMenu:
+                if (this.state.contextMenuPosition) {
+                    this.setState({contextMenuPosition: null});
+                } else {
+                    if (this.buttonRef.current) this.buttonRef.current.click();
+                }
+                break;
+            case Action.JoinRoom:
+                this.addPendingJoinRoom(ev.roomId);
+                break;
+            case Action.JoinRoomReady:
+            case Action.JoinRoomError:
+                this.removePendingJoinRoom(ev.roomId);
+                break;
         }
     };
 
+    private addPendingJoinRoom(roomId: string): void {
+        this.setState({
+            pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin)
+                .add(roomId),
+        });
+    }
+
+    private removePendingJoinRoom(roomId: string): void {
+        if (this.state.pendingRoomJoin.delete(roomId)) {
+            this.setState({
+                pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin),
+            })
+        }
+    }
+
     private onOpenMenuClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -333,9 +366,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 const mxDomain = MatrixClientPeg.get().getDomain();
                 const validDomains = hostSignupDomains.filter(d => (d === mxDomain || mxDomain.endsWith(`.${d}`)));
                 if (!hostSignupConfig.domains || validDomains.length > 0) {
-                    topSection = <div onClick={this.onCloseMenu}>
-                        <HostSignupAction />
-                    </div>;
+                    topSection = <HostSignupAction onClick={this.onCloseMenu} />;
                 }
             }
         }
@@ -377,12 +408,12 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconBell"
                         label={_t("Notification settings")}
-                        onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
+                        onClick={(e) => this.onSettingsOpen(e, UserTab.Notifications)}
                     />
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconLock"
                         label={_t("Security & privacy")}
-                        onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
+                        onClick={(e) => this.onSettingsOpen(e, UserTab.Security)}
                     />
                     <IconizedContextMenuOption
                         iconClassName="mx_UserMenu_iconSettings"
@@ -617,6 +648,14 @@ export default class UserMenu extends React.Component<IProps, IState> {
                             />
                         </span>
                         {name}
+                        {this.state.pendingRoomJoin.size > 0 && (
+                            <InlineSpinner>
+                                <TooltipButton helpText={_t(
+                                    "Currently joining %(count)s rooms",
+                                    { count: this.state.pendingRoomJoin.size },
+                                )} />
+                            </InlineSpinner>
+                        )}
                         {dnd}
                         {buttons}
                     </div>

src/components/structures/ViewSource.js

@@ -55,7 +55,7 @@ export default class ViewSource extends React.Component {
     viewSourceContent() {
         const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
         const isEncrypted = mxEvent.isEncrypted();
-        const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private
+        const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private
         const originalEventSource = mxEvent.event;
 
         if (isEncrypted) {

src/components/structures/auth/CompleteSecurity.js

@@ -18,14 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import {
-    SetupEncryptionStore,
-    PHASE_LOADING,
-    PHASE_INTRO,
-    PHASE_BUSY,
-    PHASE_DONE,
-    PHASE_CONFIRM_SKIP,
-} from '../../../stores/SetupEncryptionStore';
+import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import SetupEncryptionBody from "./SetupEncryptionBody";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -61,18 +54,18 @@ export default class CompleteSecurity extends React.Component {
         let icon;
         let title;
 
-        if (phase === PHASE_LOADING) {
+        if (phase === Phase.Loading) {
             return null;
-        } else if (phase === PHASE_INTRO) {
+        } else if (phase === Phase.Intro) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Verify this login");
-        } else if (phase === PHASE_DONE) {
+        } else if (phase === Phase.Done) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
             title = _t("Session verified");
-        } else if (phase === PHASE_CONFIRM_SKIP) {
+        } else if (phase === Phase.ConfirmSkip) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Are you sure?");
-        } else if (phase === PHASE_BUSY) {
+        } else if (phase === Phase.Busy) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Verify this login");
         } else {

src/components/structures/auth/Login.tsx

@@ -59,6 +59,7 @@ interface IProps {
     fallbackHsUrl?: string;
     defaultDeviceDisplayName?: string;
     fragmentAfterLogin?: string;
+    defaultUsername?: string;
 
     // Called when the user has logged in. Params:
     // - The object returned by the login API
@@ -119,7 +120,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
 
             flows: null,
 
-            username: "",
+            username: props.defaultUsername? props.defaultUsername: '',
             phoneCountry: null,
             phoneNumber: "",
 

src/components/structures/auth/Registration.tsx

@@ -61,7 +61,7 @@ interface IProps {
         is_url?: string;
         session_id: string;
         /* eslint-enable camelcase */
-    }): void;
+    }): string;
     // registration shouldn't know or care how login is done.
     onLoginClick(): void;
     onServerConfigChange(config: ValidatedServerConfig): void;
@@ -223,7 +223,8 @@ export default class Registration extends React.Component<IProps, IState> {
                 this.setState({
                     flows: e.data.flows,
                 });
-            } else if (e.httpStatus === 403 && e.errcode === "M_UNKNOWN") {
+            } else if (e.httpStatus === 403 || e.errcode === "M_FORBIDDEN") {
+                // Check for 403 or M_FORBIDDEN, Synapse used to send 403 M_UNKNOWN but now sends 403 M_FORBIDDEN.
                 // At this point registration is pretty much disabled, but before we do that let's
                 // quickly check to see if the server supports SSO instead. If it does, we'll send
                 // the user off to the login page to figure their account out.
@@ -268,7 +269,7 @@ export default class Registration extends React.Component<IProps, IState> {
         );
     }
 
-    private onUIAuthFinished = async (success, response, extra) => {
+    private onUIAuthFinished = async (success: boolean, response: any) => {
         if (!success) {
             let msg = response.message || response.toString();
             // can we give a better error message?
@@ -467,7 +468,7 @@ export default class Registration extends React.Component<IProps, IState> {
             let ssoSection;
             if (this.state.ssoFlow) {
                 let continueWithSection;
-                const providers = this.state.ssoFlow["org.matrix.msc2858.identity_providers"] || [];
+                const providers = this.state.ssoFlow.identity_providers || [];
                 // when there is only a single (or 0) providers we show a wide button with `Continue with X` text
                 if (providers.length > 1) {
                     // i18n: ssoButtons is a placeholder to help translators understand context

src/components/structures/auth/SetupEncryptionBody.js

@@ -21,15 +21,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
 import * as sdk from '../../../index';
-import {
-    SetupEncryptionStore,
-    PHASE_LOADING,
-    PHASE_INTRO,
-    PHASE_BUSY,
-    PHASE_DONE,
-    PHASE_CONFIRM_SKIP,
-    PHASE_FINISHED,
-} from '../../../stores/SetupEncryptionStore';
+import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 function keyHasPassphrase(keyInfo) {
@@ -63,7 +55,7 @@ export default class SetupEncryptionBody extends React.Component {
 
     _onStoreUpdate = () => {
         const store = SetupEncryptionStore.sharedInstance();
-        if (store.phase === PHASE_FINISHED) {
+        if (store.phase === Phase.Finished) {
             this.props.onFinished();
             return;
         }
@@ -136,7 +128,7 @@ export default class SetupEncryptionBody extends React.Component {
                 onClose={this.props.onFinished}
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
-        } else if (phase === PHASE_INTRO) {
+        } else if (phase === Phase.Intro) {
             const store = SetupEncryptionStore.sharedInstance();
             let recoveryKeyPrompt;
             if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
@@ -174,7 +166,7 @@ export default class SetupEncryptionBody extends React.Component {
                     </div>
                 </div>
             );
-        } else if (phase === PHASE_DONE) {
+        } else if (phase === Phase.Done) {
             let message;
             if (this.state.backupInfo) {
                 message = <p>{_t(
@@ -200,7 +192,7 @@ export default class SetupEncryptionBody extends React.Component {
                     </div>
                 </div>
             );
-        } else if (phase === PHASE_CONFIRM_SKIP) {
+        } else if (phase === Phase.ConfirmSkip) {
             return (
                 <div>
                     <p>{_t(
@@ -224,7 +216,7 @@ export default class SetupEncryptionBody extends React.Component {
                     </div>
                 </div>
             );
-        } else if (phase === PHASE_BUSY || phase === PHASE_LOADING) {
+        } else if (phase === Phase.Busy || phase === Phase.Loading) {
             const Spinner = sdk.getComponent('views.elements.Spinner');
             return <Spinner />;
         } else {

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2016-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,9 +14,9 @@ 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 classnames from 'classnames';
+import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -27,6 +25,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { LocalisedPolicy, Policies } from '../../../Terms';
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -74,36 +73,72 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  *    focus: set the input focus appropriately in the form.
  */
 
+enum AuthType {
+    Password = "m.login.password",
+    Recaptcha = "m.login.recaptcha",
+    Terms = "m.login.terms",
+    Email = "m.login.email.identity",
+    Msisdn = "m.login.msisdn",
+    Sso = "m.login.sso",
+    SsoUnstable = "org.matrix.login.sso",
+}
+
+/* eslint-disable camelcase */
+interface IAuthDict {
+    type?: AuthType;
+    // TODO: Remove `user` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    user?: string;
+    identifier?: any;
+    password?: string;
+    response?: string;
+    // TODO: Remove `threepid_creds` once servers support proper UIA
+    // See https://github.com/vector-im/element-web/issues/10312
+    // See https://github.com/matrix-org/matrix-doc/issues/2220
+    threepid_creds?: any;
+    threepidCreds?: any;
+}
+/* eslint-enable camelcase */
+
 export const DEFAULT_PHASE = 0;
 
-@replaceableComponent("views.auth.PasswordAuthEntry")
-export class PasswordAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.password";
+interface IAuthEntryProps {
+    matrixClient: MatrixClient;
+    loginType: string;
+    authSessionId: string;
+    errorText?: string;
+    // Is the auth logic currently waiting for something to happen?
+    busy?: boolean;
+    onPhaseChange: (phase: number) => void;
+    submitAuthDict: (auth: IAuthDict) => void;
+}
 
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        // is the auth logic currently waiting for something to
-        // happen?
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+interface IPasswordAuthEntryState {
+    password: string;
+}
+
+@replaceableComponent("views.auth.PasswordAuthEntry")
+export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswordAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Password;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            password: "",
+        };
+    }
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    state = {
-        password: "",
-    };
-
-    _onSubmit = e => {
+    private onSubmit = (e: FormEvent) => {
         e.preventDefault();
         if (this.props.busy) return;
 
         this.props.submitAuthDict({
-            type: PasswordAuthEntry.LOGIN_TYPE,
+            type: AuthType.Password,
             // TODO: Remove `user` once servers support proper UIA
             // See https://github.com/vector-im/element-web/issues/10312
             user: this.props.matrixClient.credentials.userId,
@@ -115,7 +150,7 @@ export class PasswordAuthEntry extends React.Component {
         });
     };
 
-    _onPasswordFieldChange = ev => {
+    private onPasswordFieldChange = (ev: ChangeEvent<HTMLInputElement>) => {
         // enable the submit button iff the password is non-empty
         this.setState({
             password: ev.target.value,
@@ -123,7 +158,7 @@ export class PasswordAuthEntry extends React.Component {
     };
 
     render() {
-        const passwordBoxClass = classnames({
+        const passwordBoxClass = classNames({
             "error": this.props.errorText,
         });
 
@@ -155,7 +190,7 @@ export class PasswordAuthEntry extends React.Component {
         return (
             <div>
                 <p>{ _t("Confirm your identity by entering your account password below.") }</p>
-                <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
+                <form onSubmit={this.onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
                         className={passwordBoxClass}
                         type="password"
@@ -163,7 +198,7 @@ export class PasswordAuthEntry extends React.Component {
                         label={_t('Password')}
                         autoFocus={true}
                         value={this.state.password}
-                        onChange={this._onPasswordFieldChange}
+                        onChange={this.onPasswordFieldChange}
                     />
                     <div className="mx_button_row">
                         { submitButtonOrSpinner }
@@ -175,26 +210,26 @@ export class PasswordAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.RecaptchaAuthEntry")
-export class RecaptchaAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.recaptcha";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+/* eslint-disable camelcase */
+interface IRecaptchaAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        public_key?: string;
     };
+}
+/* eslint-enable camelcase */
+
+@replaceableComponent("views.auth.RecaptchaAuthEntry")
+export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Recaptcha;
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    _onCaptchaResponse = response => {
+    private onCaptchaResponse = (response: string) => {
         CountlyAnalytics.instance.track("onboarding_grecaptcha_submit");
         this.props.submitAuthDict({
-            type: RecaptchaAuthEntry.LOGIN_TYPE,
+            type: AuthType.Recaptcha,
             response: response,
         });
     };
@@ -230,7 +265,7 @@ export class RecaptchaAuthEntry extends React.Component {
         return (
             <div>
                 <CaptchaForm sitePublicKey={sitePublicKey}
-                    onCaptchaResponse={this._onCaptchaResponse}
+                    onCaptchaResponse={this.onCaptchaResponse}
                 />
                 { errorSection }
             </div>
@@ -238,18 +273,28 @@ export class RecaptchaAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.TermsAuthEntry")
-export class TermsAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.terms";
-
-    static propTypes = {
-        submitAuthDict: PropTypes.func.isRequired,
-        stageParams: PropTypes.object.isRequired,
-        errorText: PropTypes.string,
-        busy: PropTypes.bool,
-        showContinue: PropTypes.bool,
-        onPhaseChange: PropTypes.func.isRequired,
+interface ITermsAuthEntryProps extends IAuthEntryProps {
+    stageParams?: {
+        policies?: Policies;
     };
+    showContinue: boolean;
+}
+
+interface LocalisedPolicyWithId extends LocalisedPolicy {
+    id: string;
+}
+
+interface ITermsAuthEntryState {
+    policies: LocalisedPolicyWithId[];
+    toggledPolicies: {
+        [policy: string]: boolean;
+    };
+    errorText?: string;
+}
+
+@replaceableComponent("views.auth.TermsAuthEntry")
+export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITermsAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Terms;
 
     constructor(props) {
         super(props);
@@ -294,8 +339,11 @@ export class TermsAuthEntry extends React.Component {
 
             initToggles[policyId] = false;
 
-            langPolicy.id = policyId;
-            pickedPolicies.push(langPolicy);
+            pickedPolicies.push({
+                id: policyId,
+                name: langPolicy.name,
+                url: langPolicy.url,
+            });
         }
 
         this.state = {
@@ -311,11 +359,11 @@ export class TermsAuthEntry extends React.Component {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    tryContinue = () => {
-        this._trySubmit();
+    public tryContinue = () => {
+        this.trySubmit();
     };
 
-    _togglePolicy(policyId) {
+    private togglePolicy(policyId: string) {
         const newToggles = {};
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
@@ -326,7 +374,7 @@ export class TermsAuthEntry extends React.Component {
         this.setState({"toggledPolicies": newToggles});
     }
 
-    _trySubmit = () => {
+    private trySubmit = () => {
         let allChecked = true;
         for (const policy of this.state.policies) {
             const checked = this.state.toggledPolicies[policy.id];
@@ -334,7 +382,7 @@ export class TermsAuthEntry extends React.Component {
         }
 
         if (allChecked) {
-            this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+            this.props.submitAuthDict({type: AuthType.Terms});
             CountlyAnalytics.instance.track("onboarding_terms_complete");
         } else {
             this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
@@ -356,7 +404,7 @@ export class TermsAuthEntry extends React.Component {
             checkboxes.push(
                 // XXX: replace with StyledCheckbox
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
-                    <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
+                    <input type="checkbox" onChange={() => this.togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
                 </label>,
             );
@@ -375,7 +423,7 @@ export class TermsAuthEntry extends React.Component {
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
         }
 
         return (
@@ -389,21 +437,18 @@ export class TermsAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.EmailIdentityAuthEntry")
-export class EmailIdentityAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.email.identity";
-
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        clientSecret: PropTypes.string.isRequired,
-        inputs: PropTypes.object.isRequired,
-        stageState: PropTypes.object.isRequired,
-        fail: PropTypes.func.isRequired,
-        setEmailSid: PropTypes.func.isRequired,
-        onPhaseChange: PropTypes.func.isRequired,
+interface IEmailIdentityAuthEntryProps extends IAuthEntryProps {
+    inputs?: {
+        emailAddress?: string;
     };
+    stageState?: {
+        emailSid: string;
+    };
+}
+
+@replaceableComponent("views.auth.EmailIdentityAuthEntry")
+export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEntryProps> {
+    static LOGIN_TYPE = AuthType.Email;
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
@@ -427,7 +472,7 @@ export class EmailIdentityAuthEntry extends React.Component {
             return (
                 <div className="mx_InteractiveAuthEntryComponents_emailWrapper">
                     <p>{ _t("A confirmation email has been sent to %(emailAddress)s",
-                        { emailAddress: (sub) => <b>{ this.props.inputs.emailAddress }</b> },
+                        { emailAddress: <b>{ this.props.inputs.emailAddress }</b> },
                     ) }
                     </p>
                     <p>{ _t("Open the link in the email to continue registration.") }</p>
@@ -437,37 +482,44 @@ export class EmailIdentityAuthEntry extends React.Component {
     }
 }
 
+interface IMsisdnAuthEntryProps extends IAuthEntryProps {
+    inputs: {
+        phoneCountry: string;
+        phoneNumber: string;
+    };
+    clientSecret: string;
+    fail: (error: Error) => void;
+}
+
+interface IMsisdnAuthEntryState {
+    token: string;
+    requestingToken: boolean;
+    errorText: string;
+}
+
 @replaceableComponent("views.auth.MsisdnAuthEntry")
-export class MsisdnAuthEntry extends React.Component {
-    static LOGIN_TYPE = "m.login.msisdn";
+export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsisdnAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Msisdn;
 
-    static propTypes = {
-        inputs: PropTypes.shape({
-            phoneCountry: PropTypes.string,
-            phoneNumber: PropTypes.string,
-        }),
-        fail: PropTypes.func,
-        clientSecret: PropTypes.func,
-        submitAuthDict: PropTypes.func.isRequired,
-        matrixClient: PropTypes.object,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+    private submitUrl: string;
+    private sid: string;
+    private msisdn: string;
 
-    state = {
-        token: '',
-        requestingToken: false,
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            token: '',
+            requestingToken: false,
+            errorText: '',
+        };
+    }
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
-        this._submitUrl = null;
-        this._sid = null;
-        this._msisdn = null;
-        this._tokenBox = null;
-
         this.setState({requestingToken: true});
-        this._requestMsisdnToken().catch((e) => {
+        this.requestMsisdnToken().catch((e) => {
             this.props.fail(e);
         }).finally(() => {
             this.setState({requestingToken: false});
@@ -477,26 +529,26 @@ export class MsisdnAuthEntry extends React.Component {
     /*
      * Requests a verification token by SMS.
      */
-    _requestMsisdnToken() {
+    private requestMsisdnToken(): Promise<void> {
         return this.props.matrixClient.requestRegisterMsisdnToken(
             this.props.inputs.phoneCountry,
             this.props.inputs.phoneNumber,
             this.props.clientSecret,
             1, // TODO: Multiple send attempts?
         ).then((result) => {
-            this._submitUrl = result.submit_url;
-            this._sid = result.sid;
-            this._msisdn = result.msisdn;
+            this.submitUrl = result.submit_url;
+            this.sid = result.sid;
+            this.msisdn = result.msisdn;
         });
     }
 
-    _onTokenChange = e => {
+    private onTokenChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({
             token: e.target.value,
         });
     };
 
-    _onFormSubmit = async e => {
+    private onFormSubmit = async (e: FormEvent) => {
         e.preventDefault();
         if (this.state.token == '') return;
 
@@ -506,20 +558,20 @@ export class MsisdnAuthEntry extends React.Component {
 
         try {
             let result;
-            if (this._submitUrl) {
+            if (this.submitUrl) {
                 result = await this.props.matrixClient.submitMsisdnTokenOtherUrl(
-                    this._submitUrl, this._sid, this.props.clientSecret, this.state.token,
+                    this.submitUrl, this.sid, this.props.clientSecret, this.state.token,
                 );
             } else {
                 throw new Error("The registration with MSISDN flow is misconfigured");
             }
             if (result.success) {
                 const creds = {
-                    sid: this._sid,
+                    sid: this.sid,
                     client_secret: this.props.clientSecret,
                 };
                 this.props.submitAuthDict({
-                    type: MsisdnAuthEntry.LOGIN_TYPE,
+                    type: AuthType.Msisdn,
                     // TODO: Remove `threepid_creds` once servers support proper UIA
                     // See https://github.com/vector-im/element-web/issues/10312
                     // See https://github.com/matrix-org/matrix-doc/issues/2220
@@ -543,7 +595,7 @@ export class MsisdnAuthEntry extends React.Component {
             return <Loader />;
         } else {
             const enableSubmit = Boolean(this.state.token);
-            const submitClasses = classnames({
+            const submitClasses = classNames({
                 mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
                 mx_GeneralButton: true,
             });
@@ -558,16 +610,16 @@ export class MsisdnAuthEntry extends React.Component {
             return (
                 <div>
                     <p>{ _t("A text message has been sent to %(msisdn)s",
-                        { msisdn: <i>{ this._msisdn }</i> },
+                        { msisdn: <i>{ this.msisdn }</i> },
                     ) }
                     </p>
                     <p>{ _t("Please enter the code it contains:") }</p>
                     <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
-                        <form onSubmit={this._onFormSubmit}>
+                        <form onSubmit={this.onFormSubmit}>
                             <input type="text"
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
-                                onChange={this._onTokenChange}
+                                onChange={this.onTokenChange}
                                 aria-label={ _t("Code")}
                             />
                             <br />
@@ -584,40 +636,40 @@ export class MsisdnAuthEntry extends React.Component {
     }
 }
 
-@replaceableComponent("views.auth.SSOAuthEntry")
-export class SSOAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-        continueText: PropTypes.string,
-        continueKind: PropTypes.string,
-        onCancel: PropTypes.func,
-    };
+interface ISSOAuthEntryProps extends IAuthEntryProps {
+    continueText?: string;
+    continueKind?: string;
+    onCancel?: () => void;
+}
 
-    static LOGIN_TYPE = "m.login.sso";
-    static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso";
+interface ISSOAuthEntryState {
+    phase: number;
+    attemptFailed: boolean;
+}
+
+@replaceableComponent("views.auth.SSOAuthEntry")
+export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEntryState> {
+    static LOGIN_TYPE = AuthType.Sso;
+    static UNSTABLE_LOGIN_TYPE = AuthType.SsoUnstable;
 
     static PHASE_PREAUTH = 1; // button to start SSO
     static PHASE_POSTAUTH = 2; // button to confirm SSO completed
 
-    _ssoUrl: string;
+    private ssoUrl: string;
+    private popupWindow: Window;
 
     constructor(props) {
         super(props);
 
         // We actually send the user through fallback auth so we don't have to
         // deal with a redirect back to us, losing application context.
-        this._ssoUrl = props.matrixClient.getFallbackAuthUrl(
+        this.ssoUrl = props.matrixClient.getFallbackAuthUrl(
             this.props.loginType,
             this.props.authSessionId,
         );
 
-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);
 
         this.state = {
             phase: SSOAuthEntry.PHASE_PREAUTH,
@@ -625,44 +677,44 @@ export class SSOAuthEntry extends React.Component {
         };
     }
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
     }
 
     componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
-            this._popupWindow = null;
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
+            this.popupWindow = null;
         }
     }
 
-    attemptFailed = () => {
+    public attemptFailed = () => {
         this.setState({
             attemptFailed: true,
         });
     };
 
-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
         if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
-            if (this._popupWindow) {
-                this._popupWindow.close();
-                this._popupWindow = null;
+            if (this.popupWindow) {
+                this.popupWindow.close();
+                this.popupWindow = null;
             }
         }
     };
 
-    onStartAuthClick = () => {
+    private onStartAuthClick = () => {
         // Note: We don't use PlatformPeg's startSsoAuth functions because we almost
         // certainly will need to open the thing in a new tab to avoid losing application
         // context.
 
-        this._popupWindow = window.open(this._ssoUrl, "_blank");
+        this.popupWindow = window.open(this.ssoUrl, "_blank");
         this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
         this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
     };
 
-    onConfirmClick = () => {
+    private onConfirmClick = () => {
         this.props.submitAuthDict({});
     };
 
@@ -716,46 +768,37 @@ export class SSOAuthEntry extends React.Component {
 }
 
 @replaceableComponent("views.auth.FallbackAuthEntry")
-export class FallbackAuthEntry extends React.Component {
-    static propTypes = {
-        matrixClient: PropTypes.object.isRequired,
-        authSessionId: PropTypes.string.isRequired,
-        loginType: PropTypes.string.isRequired,
-        submitAuthDict: PropTypes.func.isRequired,
-        errorText: PropTypes.string,
-        onPhaseChange: PropTypes.func.isRequired,
-    };
+export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
+    private popupWindow: Window;
+    private fallbackButton = createRef<HTMLAnchorElement>();
 
     constructor(props) {
         super(props);
 
         // we have to make the user click a button, as browsers will block
         // the popup if we open it immediately.
-        this._popupWindow = null;
-        window.addEventListener("message", this._onReceiveMessage);
-
-        this._fallbackButton = createRef();
+        this.popupWindow = null;
+        window.addEventListener("message", this.onReceiveMessage);
     }
 
-
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
     componentWillUnmount() {
-        window.removeEventListener("message", this._onReceiveMessage);
-        if (this._popupWindow) {
-            this._popupWindow.close();
+        window.removeEventListener("message", this.onReceiveMessage);
+        if (this.popupWindow) {
+            this.popupWindow.close();
         }
     }
 
-    focus = () => {
-        if (this._fallbackButton.current) {
-            this._fallbackButton.current.focus();
+    public focus = () => {
+        if (this.fallbackButton.current) {
+            this.fallbackButton.current.focus();
         }
     };
 
-    _onShowFallbackClick = e => {
+    private onShowFallbackClick = (e: MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -763,10 +806,10 @@ export class FallbackAuthEntry extends React.Component {
             this.props.loginType,
             this.props.authSessionId,
         );
-        this._popupWindow = window.open(url, "_blank");
+        this.popupWindow = window.open(url, "_blank");
     };
 
-    _onReceiveMessage = event => {
+    private onReceiveMessage = (event: MessageEvent) => {
         if (
             event.data === "authDone" &&
             event.origin === this.props.matrixClient.getHomeserverUrl()
@@ -786,27 +829,31 @@ export class FallbackAuthEntry extends React.Component {
         }
         return (
             <div>
-                <a href="" ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
+                <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
+                    _t("Start authentication")
+                }</a>
                 {errorSection}
             </div>
         );
     }
 }
 
-const AuthEntryComponents = [
-    PasswordAuthEntry,
-    RecaptchaAuthEntry,
-    EmailIdentityAuthEntry,
-    MsisdnAuthEntry,
-    TermsAuthEntry,
-    SSOAuthEntry,
-];
-
-export default function getEntryComponentForLoginType(loginType) {
-    for (const c of AuthEntryComponents) {
-        if (c.LOGIN_TYPE === loginType || c.UNSTABLE_LOGIN_TYPE === loginType) {
-            return c;
-        }
+export default function getEntryComponentForLoginType(loginType: AuthType): typeof React.Component {
+    switch (loginType) {
+        case AuthType.Password:
+            return PasswordAuthEntry;
+        case AuthType.Recaptcha:
+            return RecaptchaAuthEntry;
+        case AuthType.Email:
+            return EmailIdentityAuthEntry;
+        case AuthType.Msisdn:
+            return MsisdnAuthEntry;
+        case AuthType.Terms:
+            return TermsAuthEntry;
+        case AuthType.Sso:
+        case AuthType.SsoUnstable:
+            return SSOAuthEntry;
+        default:
+            return FallbackAuthEntry;
     }
-    return FallbackAuthEntry;
 }

src/components/views/avatars/BaseAvatar.tsx

@@ -17,15 +17,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useContext, useEffect, useState} from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
+import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {toPx} from "../../../utils/units";
-import {ResizeMethod} from "../../../Avatar";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { toPx } from "../../../utils/units";
 import { _t } from '../../../languageHandler';
 
 interface IProps {
@@ -44,12 +46,12 @@ interface IProps {
     className?: string;
 }
 
-const calculateUrls = (url, urls) => {
+const calculateUrls = (url, urls, lowBandwidth) => {
     // work out the full set of urls to try to load. This is formed like so:
     // imageUrls: [ props.url, ...props.urls ]
 
     let _urls = [];
-    if (!SettingsStore.getValue("lowBandwidth")) {
+    if (!lowBandwidth) {
         _urls = urls || [];
 
         if (url) {
@@ -63,7 +65,13 @@ const calculateUrls = (url, urls) => {
 };
 
 const useImageUrl = ({url, urls}): [string, () => void] => {
-    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
+    // Since this is a hot code path and the settings store can be slow, we
+    // use the cached lowBandwidth value from the room context if it exists
+    const roomContext = useContext(RoomContext);
+    const lowBandwidth = roomContext ?
+        roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
+
+    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
     const [urlsIndex, setIndex] = useState<number>(0);
 
     const onError = useCallback(() => {
@@ -71,7 +79,7 @@ const useImageUrl = ({url, urls}): [string, () => void] => {
     }, []);
 
     useEffect(() => {
-        setUrls(calculateUrls(url, urls));
+        setUrls(calculateUrls(url, urls, lowBandwidth));
         setIndex(0);
     }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -179,7 +187,7 @@ const BaseAvatar = (props: IProps) => {
                     width: toPx(width),
                     height: toPx(height),
                 }}
-                title={title} alt=""
+                title={title} alt={_t("Avatar")}
                 inputRef={inputRef}
                 {...otherProps} />
         );

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -20,7 +20,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { User } from "matrix-js-sdk/src/models/user";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import { TagID } from '../../../stores/room-list/models';
 import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from '../rooms/NotificationBadge';
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
@@ -35,7 +34,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 interface IProps {
     room: Room;
     avatarSize: number;
-    tag: TagID;
     displayBadge?: boolean;
     forceCount?: boolean;
     oobData?: object;
@@ -121,7 +119,10 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (this.props.room.roomId !== room.roomId) return;
 
         if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
-            this.setState({icon: this.calculateIcon()});
+            const newIcon = this.calculateIcon();
+            if (newIcon !== this.state.icon) {
+                this.setState({icon: newIcon});
+            }
         }
     };
 

src/components/views/avatars/GroupAvatar.tsx

@@ -15,10 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+
 import BaseAvatar from './BaseAvatar';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 export interface IProps {
         groupId?: string;

src/components/views/avatars/MemberAvatar.tsx

@@ -16,14 +16,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 
 import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import BaseAvatar from "./BaseAvatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;

src/components/views/avatars/RoomAvatar.tsx

@@ -13,17 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, {ComponentProps} from 'react';
-import Room from 'matrix-js-sdk/src/models/room';
+import React, { ComponentProps } from 'react';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
-import {ResizeMethod} from "../../../Avatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,

src/components/views/beta/BetaCard.tsx

@@ -0,0 +1,116 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import Modal from "../../../Modal";
+import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../../SdkConfig";
+import SettingsFlag from "../elements/SettingsFlag";
+
+interface IProps {
+    title?: string;
+    featureId: string;
+}
+
+export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
+    if (onClick) {
+        return <TextWithTooltip
+            class={classNames("mx_BetaCard_betaPill", {
+                mx_BetaCard_betaPill_clickable: !!onClick,
+            })}
+            tooltip={<div>
+                <div className="mx_Tooltip_title">
+                    { _t("Spaces is a beta feature") }
+                </div>
+                <div className="mx_Tooltip_sub">
+                    { _t("Tap for more info") }
+                </div>
+            </div>}
+            onClick={onClick}
+            tooltipProps={{ yOffset: -10 }}
+        >
+            { _t("Beta") }
+        </TextWithTooltip>;
+    }
+
+    return <span
+        className={classNames("mx_BetaCard_betaPill", {
+            mx_BetaCard_betaPill_clickable: !!onClick,
+        })}
+        onClick={onClick}
+    >
+        { _t("Beta") }
+    </span>;
+};
+
+const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+    if (!info) return null; // Beta is invalid/disabled
+
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading, extraSettings } = info;
+    const value = SettingsStore.getValue(featureId);
+
+    let feedbackButton;
+    if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
+        feedbackButton = <AccessibleButton
+            onClick={() => {
+                Modal.createTrackedDialog("Beta Feedback", featureId, BetaFeedbackDialog, { featureId });
+            }}
+            kind="primary"
+        >
+            { _t("Feedback") }
+        </AccessibleButton>;
+    }
+
+    return <div className="mx_BetaCard">
+        <div className="mx_BetaCard_columns">
+            <div>
+                <h3 className="mx_BetaCard_title">
+                    { titleOverride || _t(title) }
+                    <BetaPill />
+                </h3>
+                <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+                <div className="mx_BetaCard_buttons">
+                    { feedbackButton }
+                    <AccessibleButton
+                        onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+                        kind={feedbackButton ? "primary_outline" : "primary"}
+                    >
+                        { value ? _t("Leave the beta") : _t("Join the beta") }
+                    </AccessibleButton>
+                </div>
+                { disclaimer && <div className="mx_BetaCard_disclaimer">
+                    { disclaimer(value) }
+                </div> }
+            </div>
+            <img src={image} alt="" />
+        </div>
+        { extraSettings && <div className="mx_BetaCard_relatedSettings">
+            { extraSettings.map(key => (
+                <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
+            )) }
+        </div> }
+    </div>;
+};
+
+export default BetaCard;

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import Field from "../elements/Field";
 import Dialpad from '../voip/DialPad';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -44,13 +45,21 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({value: this.state.value + digit});
     }
 
+    onChange = (ev) => {
+        this.setState({value: ev.target.value});
+    }
+
+
     render() {
         return <ContextMenu {...this.props}>
             <div className="mx_DialPadContextMenu_header">
                 <div>
                     <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
                 </div>
-                <div className="mx_DialPadContextMenu_dialled">{this.state.value}</div>
+                <Field className="mx_DialPadContextMenu_dialled"
+                    value={this.state.value} autoFocus={true}
+                    onChange={this.onChange}
+                />
             </div>
             <div className="mx_DialPadContextMenu_horizSep" />
             <div className="mx_DialPadContextMenu_dialPad">

src/components/views/context_menus/MessageContextMenu.js

@@ -17,9 +17,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -28,9 +28,12 @@ import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MenuItem} from "../../structures/ContextMenu";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
+import ForwardDialog from "../dialogs/ForwardDialog";
+import { Action } from "../../../dispatcher/actions";
 
 export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -82,7 +85,7 @@ export default class MessageContextMenu extends React.Component {
         const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
             && this.props.mxEvent.getType() !== EventType.RoomServerAcl
             && this.props.mxEvent.getType() !== EventType.RoomEncryption;
-        let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
+        let canPin = room.currentState.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli);
 
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
         if (!SettingsStore.getValue("feature_pinning")) canPin = false;
@@ -92,7 +95,7 @@ export default class MessageContextMenu extends React.Component {
 
     _isPinned() {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
+        const pinnedEvent = room.currentState.getStateEvents(EventType.RoomPinnedEvents, '');
         if (!pinnedEvent) return false;
         const content = pinnedEvent.getContent();
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
@@ -156,34 +159,32 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
-        if (this.props.onCloseDialog) this.props.onCloseDialog();
-        dis.dispatch({
-            action: 'forward_event',
+        Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
+            matrixClient: MatrixClientPeg.get(),
             event: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
     };
 
     onPinClick = () => {
-        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
-            .catch((e) => {
-                // Intercept the Event Not Found error and fall through the promise chain with no event.
-                if (e.errcode === "M_NOT_FOUND") return null;
-                throw e;
-            })
-            .then((event) => {
-                const eventIds = (event ? event.pinned : []) || [];
-                if (!eventIds.includes(this.props.mxEvent.getId())) {
-                    // Not pinned - add
-                    eventIds.push(this.props.mxEvent.getId());
-                } else {
-                    // Pinned - remove
-                    eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
-                }
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const eventId = this.props.mxEvent.getId();
 
-                const cli = MatrixClientPeg.get();
-                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+        const pinnedIds = room?.currentState?.getStateEvents(EventType.RoomPinnedEvents, "")?.pinned || [];
+        if (pinnedIds.includes(eventId)) {
+            pinnedIds.splice(pinnedIds.indexOf(eventId), 1);
+        } else {
+            pinnedIds.push(eventId);
+            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+                event_ids: [
+                    ...(room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids || []),
+                    eventId,
+                ],
             });
+        }
+        cli.sendStateEvent(this.props.mxEvent.getRoomId(), EventType.RoomPinnedEvents, { pinned: pinnedIds }, "");
         this.closeMenu();
     };
 
@@ -200,7 +201,7 @@ export default class MessageContextMenu extends React.Component {
 
     onQuoteClick = () => {
         dis.dispatch({
-            action: 'quote',
+            action: Action.ComposerInsert,
             event: this.props.mxEvent,
         });
         this.closeMenu();
@@ -256,55 +257,68 @@ export default class MessageContextMenu extends React.Component {
         let externalURLButton;
         let quoteButton;
         let collapseReplyThread;
+        let redactItemList;
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
-                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconResend"
+                        label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
+                        onClick={this.onResendReactionsClick}
+                    />
                 );
             }
         }
 
         if (isSent && this.state.canRedact) {
             redactButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Remove') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconRedact"
+                    label={_t("Remove")}
+                    onClick={this.onRedactClick}
+                />
             );
         }
 
         if (isContentActionable(mxEvent)) {
             forwardButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                    { _t('Forward Message') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconForward"
+                    label={_t("Forward")}
+                    onClick={this.onForwardClick}
+                />
             );
 
             if (this.state.canPin) {
                 pinButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconPin"
+                        label={ this._isPinned() ? _t('Unpin') : _t('Pin') }
+                        onClick={this.onPinClick}
+                    />
                 );
             }
         }
 
         const viewSourceButton = (
-            <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                { _t('View Source') }
-            </MenuItem>
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
+                label={_t("View source")}
+                onClick={this.onViewSourceClick}
+            />
         );
 
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        { _t('Unhide Preview') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconUnhidePreview"
+                        label={_t("Show preview")}
+                        onClick={this.onUnhidePreviewClick}
+                    />
                 );
             }
         }
@@ -315,77 +329,97 @@ export default class MessageContextMenu extends React.Component {
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <MenuItem
-                element="a"
-                className="mx_MessageContextMenu_field"
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
+                label= {_t('Share')}
+                element="a"
                 href={permalink}
                 target="_blank"
                 rel="noreferrer noopener"
-            >
-                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
-            </MenuItem>
+            />
         );
 
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-                    { _t('Quote') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconQuote"
+                    label={_t("Quote")}
+                    onClick={this.onQuoteClick}
+                />
             );
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (
-            typeof(mxEvent.event.content.external_url) === "string" &&
+        if (typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <MenuItem
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconLink"
+                    onClick={this.closeMenu}
+                    label={ _t('Source URL') }
                     element="a"
-                    className="mx_MessageContextMenu_field"
                     target="_blank"
                     rel="noreferrer noopener"
-                    onClick={this.closeMenu}
                     href={mxEvent.event.content.external_url}
-                >
-                    { _t('Source URL') }
-                </MenuItem>
+                />
             );
         }
 
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
-                    { _t('Collapse Reply Thread') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconCollapse"
+                    label={_t("Collapse reply thread")}
+                    onClick={this.onCollapseReplyThreadClick}
+                />
             );
         }
 
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
-                    { _t('Report Content') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconReport"
+                    label={_t("Report")}
+                    onClick={this.onReportEventClick}
+                />
+            );
+        }
+
+        const commonItemsList = (
+            <IconizedContextMenuOptionList>
+                { quoteButton }
+                { forwardButton }
+                { pinButton }
+                { permalinkButton }
+                { reportEventButton }
+                { externalURLButton }
+                { unhidePreviewButton }
+                { viewSourceButton }
+                { resendReactionsButton }
+                { collapseReplyThread }
+            </IconizedContextMenuOptionList>
+        );
+
+        if (redactButton) {
+            redactItemList = (
+                <IconizedContextMenuOptionList red>
+                    { redactButton }
+                </IconizedContextMenuOptionList>
             );
         }
 
         return (
-            <div className="mx_MessageContextMenu">
-                { resendReactionsButton }
-                { redactButton }
-                { forwardButton }
-                { pinButton }
-                { viewSourceButton }
-                { unhidePreviewButton }
-                { permalinkButton }
-                { quoteButton }
-                { externalURLButton }
-                { collapseReplyThread }
-                { reportEventButton }
-            </div>
+            <IconizedContextMenu
+                {...this.props}
+                className="mx_MessageContextMenu"
+                compact={true}
+            >
+                { commonItemsList }
+                { redactItemList }
+            </IconizedContextMenu>
         );
     }
 }

src/components/views/context_menus/TagTileContextMenu.js

@@ -23,45 +23,70 @@ import TagOrderActions from '../../../actions/TagOrderActions';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.context_menus.TagTileContextMenu")
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
         tag: PropTypes.string.isRequired,
+        index: PropTypes.number.isRequired,
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func.isRequired,
     };
 
     static contextType = MatrixClientContext;
 
-    constructor() {
-        super();
-
-        this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
-        this._onRemoveClick = this._onRemoveClick.bind(this);
-    }
-
-    _onViewCommunityClick() {
+    _onViewCommunityClick = () => {
         dis.dispatch({
             action: 'view_group',
             group_id: this.props.tag,
         });
         this.props.onFinished();
-    }
+    };
 
-    _onRemoveClick() {
+    _onRemoveClick = () => {
         dis.dispatch(TagOrderActions.removeTag(this.context, this.props.tag));
         this.props.onFinished();
-    }
+    };
+
+    _onMoveUp = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index - 1));
+        this.props.onFinished();
+    };
+
+    _onMoveDown = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index + 1));
+        this.props.onFinished();
+    };
 
     render() {
+        let moveUp;
+        let moveDown;
+        if (this.props.index > 0) {
+            moveUp = (
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_moveUp" onClick={this._onMoveUp}>
+                    { _t("Move up") }
+                </MenuItem>
+            );
+        }
+        if (this.props.index < (GroupFilterOrderStore.getOrderedTags() || []).length - 1) {
+            moveDown = (
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_moveDown" onClick={this._onMoveDown}>
+                    { _t("Move down") }
+                </MenuItem>
+            );
+        }
+
         return <div>
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
             </MenuItem>
+            { (moveUp || moveDown) ? <hr className="mx_TagTileContextMenu_separator" role="separator" /> : null }
+            { moveUp }
+            { moveDown }
             <hr className="mx_TagTileContextMenu_separator" role="separator" />
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
-                { _t('Hide') }
+                { _t("Unpin") }
             </MenuItem>
         </div>;
     }

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -40,6 +40,8 @@ interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
     showUnpin?: boolean;
     // override delete handler
     onDeleteClick?(): void;
+    // override edit handler
+    onEditClick?(): void;
 }
 
 const WidgetContextMenu: React.FC<IProps> = ({
@@ -47,6 +49,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     app,
     userWidget,
     onDeleteClick,
+    onEditClick,
     showUnpin,
     ...props
 }) => {
@@ -89,12 +92,16 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let editButton;
     if (canModify && WidgetUtils.isManagedByManager(app)) {
-        const onEditClick = () => {
-            WidgetUtils.editWidget(room, app);
+        const _onEditClick = () => {
+            if (onEditClick) {
+                onEditClick();
+            } else {
+                WidgetUtils.editWidget(room, app);
+            }
             onFinished();
         };
 
-        editButton = <IconizedContextMenuOption onClick={onEditClick} label={_t("Edit")} />;
+        editButton = <IconizedContextMenuOption onClick={_onEditClick} label={_t("Edit")} />;
     }
 
     let snapshotButton;
@@ -116,24 +123,29 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let deleteButton;
     if (onDeleteClick || canModify) {
-        const onDeleteClickDefault = () => {
-            // Show delete confirmation dialog
-            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                title: _t("Delete Widget"),
-                description: _t(
-                    "Deleting a widget removes it for all users in this room." +
-                    " Are you sure you want to delete this widget?"),
-                button: _t("Delete widget"),
-                onFinished: (confirmed) => {
-                    if (!confirmed) return;
-                    WidgetUtils.setRoomWidget(roomId, app.id);
-                },
-            });
+        const _onDeleteClick = () => {
+            if (onDeleteClick) {
+                onDeleteClick();
+            } else {
+                // Show delete confirmation dialog
+                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                    title: _t("Delete Widget"),
+                    description: _t(
+                        "Deleting a widget removes it for all users in this room." +
+                        " Are you sure you want to delete this widget?"),
+                    button: _t("Delete widget"),
+                    onFinished: (confirmed) => {
+                        if (!confirmed) return;
+                        WidgetUtils.setRoomWidget(roomId, app.id);
+                    },
+                });
+            }
+
             onFinished();
         };
 
         deleteButton = <IconizedContextMenuOption
-            onClick={onDeleteClick || onDeleteClickDefault}
+            onClick={_onDeleteClick}
             label={userWidget ? _t("Remove") : _t("Remove for everyone")}
         />;
     }

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useMemo, useState} from "react";
+import React, {ReactNode, useContext, useMemo, useState} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -36,6 +36,12 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import TruncatedList from "../elements/TruncatedList";
+import EntityTile from "../rooms/EntityTile";
+import BaseAvatar from "../avatars/BaseAvatar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -45,7 +51,10 @@ interface IProps extends IDialogProps {
 
 const Entry = ({ room, checked, onChange }) => {
     return <label className="mx_AddExistingToSpace_entry">
-        <RoomAvatar room={room} height={32} width={32} />
+        { room?.isSpaceRoom()
+            ? <RoomAvatar room={room} height={32} width={32} />
+            : <DecoratedRoomAvatar room={room} avatarSize={32} />
+        }
         <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
         <StyledCheckbox
             onChange={onChange ? (e) => onChange(e.target.checked) : null}
@@ -57,150 +66,59 @@ const Entry = ({ room, checked, onChange }) => {
 
 interface IAddExistingToSpaceProps {
     space: Room;
-    selected: Set<Room>;
-    onChange(checked: boolean, room: Room): void;
+    footerPrompt?: ReactNode;
+    emptySelectionButton?: ReactNode;
+    onFinished(added: boolean): void;
 }
 
-export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
+    space,
+    footerPrompt,
+    emptySelectionButton,
+    onFinished,
+}) => {
     const cli = useContext(MatrixClientContext);
-    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);
+    const visibleRooms = useMemo(() => cli.getVisibleRooms().filter(r => r.getMyMembership() === "join"), [cli]);
 
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase();
-
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
-    const existingSubspacesSet = new Set(existingSubspaces);
-    const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
-
-    const joinRule = space.getJoinRule();
-    const [spaces, rooms, dms] = visibleRooms.reduce((arr, room) => {
-        if (room.getMyMembership() !== "join") return arr;
-        if (!room.name.toLowerCase().includes(lcQuery)) return arr;
-
-        if (room.isSpaceRoom()) {
-            if (room !== space && !existingSubspacesSet.has(room)) {
-                arr[0].push(room);
-            }
-        } else if (!existingRoomsSet.has(room)) {
-            if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                arr[1].push(room);
-            } else if (joinRule !== "public") {
-                // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
-                arr[2].push(room);
-            }
-        }
-        return arr;
-    }, [[], [], []]);
-
-    return <div className="mx_AddExistingToSpace">
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
-            onSearch={setQuery}
-            autoComplete={true}
-            autoFocus={true}
-        />
-        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : undefined }
-
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selected.has(space)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, space);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { dms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Direct Messages") }</h3>
-                    { dms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
-    </div>;
-};
-
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
     const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
     const [progress, setProgress] = useState<number>(null);
     const [error, setError] = useState<Error>(null);
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
 
-    let spaceOptionSection;
-    if (existingSubspaces.length > 0) {
-        const options = [space, ...existingSubspaces].map((space) => {
-            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
-                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+    const existingSubspacesSet = useMemo(() => new Set(SpaceStore.instance.getChildSpaces(space.roomId)), [space]);
+    const existingRoomsSet = useMemo(() => new Set(SpaceStore.instance.getChildRooms(space.roomId)), [space]);
+
+    const [spaces, rooms, dms] = useMemo(() => {
+        let rooms = visibleRooms;
+
+        if (lcQuery) {
+            const matcher = new QueryMatcher<Room>(visibleRooms, {
+                keys: ["name"],
+                funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+                shouldMatchWordsOnly: false,
             });
-            return <div key={space.roomId} className={classes}>
-                <RoomAvatar room={space} width={24} height={24} />
-                { space.name || getDisplayAliasForRoom(space) || space.roomId }
-            </div>;
-        });
 
-        spaceOptionSection = (
-            <Dropdown
-                id="mx_SpaceSelectDropdown"
-                onOptionChange={(key: string) => {
-                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
-                }}
-                value={selectedSpace.roomId}
-                label={_t("Space selection")}
-            >
-                { options }
-            </Dropdown>
-        );
-    } else {
-        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
-            { space.name || getDisplayAliasForRoom(space) || space.roomId }
-        </div>;
-    }
+            rooms = matcher.match(lcQuery);
+        }
 
-    const title = <React.Fragment>
-        <RoomAvatar room={selectedSpace} height={40} width={40} />
-        <div>
-            <h1>{ _t("Add existing rooms") }</h1>
-            { spaceOptionSection }
-        </div>
-    </React.Fragment>;
+        const joinRule = space.getJoinRule();
+        return sortRooms(rooms).reduce((arr, room) => {
+            if (room.isSpaceRoom()) {
+                if (room !== space && !existingSubspacesSet.has(room)) {
+                    arr[0].push(room);
+                }
+            } else if (!existingRoomsSet.has(room)) {
+                if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                    arr[1].push(room);
+                } else if (joinRule !== "public") {
+                    // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+                    arr[2].push(room);
+                }
+            }
+            return arr;
+        }, [[], [], []]);
+    }, [visibleRooms, space, lcQuery, existingRoomsSet, existingSubspacesSet]);
 
     const addRooms = async () => {
         setError(null);
@@ -264,20 +182,161 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
             </div>
         </span>;
     } else {
+        let button = emptySelectionButton;
+        if (!button || selectedToAdd.size > 0) {
+            button = <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
+            </AccessibleButton>;
+        }
+
         footer = <>
             <span>
-                <div>{ _t("Want to add a new room instead?") }</div>
-                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
-                    { _t("Create a new room") }
-                </AccessibleButton>
+                { footerPrompt }
             </span>
 
-            <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
-                { _t("Add") }
-            </AccessibleButton>
+            { button }
         </>;
     }
 
+    const onChange = !busy && !error ? (checked, room) => {
+        if (checked) {
+            selectedToAdd.add(room);
+        } else {
+            selectedToAdd.delete(room);
+        }
+        setSelectedToAdd(new Set(selectedToAdd));
+    } : null;
+
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount, totalCount) {
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={() => setTruncateAt(totalCount)} />
+        );
+    }
+
+    return <div className="mx_AddExistingToSpace">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    <TruncatedList
+                        truncateAt={truncateAt}
+                        createOverflowElement={overflowTile}
+                        getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                            <Entry
+                                key={room.roomId}
+                                room={room}
+                                checked={selectedToAdd.has(room)}
+                                onChange={onChange ? (checked) => {
+                                    onChange(checked, room);
+                                } : null}
+                            />,
+                        )}
+                        getChildCount={() => rooms.length}
+                    />
+                </div>
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    <div className="mx_AddExistingToSpace_section_experimental">
+                        <div>{ _t("Feeling experimental?") }</div>
+                        <div>{ _t("You can add existing spaces to a space.") }</div>
+                    </div>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+
+        <div className="mx_AddExistingToSpace_footer">
+            { footer }
+        </div>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+
+    let spaceOptionSection;
+    if (existingSubspaces.length > 0) {
+        const options = [space, ...existingSubspaces].map((space) => {
+            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
+                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+            });
+            return <div key={space.roomId} className={classes}>
+                <RoomAvatar room={space} width={24} height={24} />
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>;
+        });
+
+        spaceOptionSection = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                }}
+                value={selectedSpace.roomId}
+                label={_t("Space selection")}
+            >
+                { options }
+            </Dropdown>
+        );
+    } else {
+        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
+            { space.name || getDisplayAliasForRoom(space) || space.roomId }
+        </div>;
+    }
+
+    const title = <React.Fragment>
+        <RoomAvatar room={selectedSpace} height={40} width={40} />
+        <div>
+            <h1>{ _t("Add existing rooms") }</h1>
+            { spaceOptionSection }
+        </div>
+    </React.Fragment>;
+
     return <BaseDialog
         title={title}
         className="mx_AddExistingToSpaceDialog"
@@ -288,21 +347,17 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
         <MatrixClientContext.Provider value={cli}>
             <AddExistingToSpace
                 space={space}
-                selected={selectedToAdd}
-                onChange={!busy && !error ? (checked, room) => {
-                    if (checked) {
-                        selectedToAdd.add(room);
-                    } else {
-                        selectedToAdd.delete(room);
-                    }
-                    setSelectedToAdd(new Set(selectedToAdd));
-                } : null}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new room instead?") }</div>
+                    <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                        { _t("Create a new room") }
+                    </AccessibleButton>
+                </>}
             />
         </MatrixClientContext.Provider>
 
-        <div className="mx_AddExistingToSpaceDialog_footer">
-            { footer }
-        </div>
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
     </BaseDialog>;
 };
 

src/components/views/dialogs/AddressPickerDialog.js

@@ -24,7 +24,7 @@ import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
-import { addressTypes, getAddressType } from '../../../UserAddress.js';
+import { addressTypes, getAddressType } from '../../../UserAddress';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
 import IdentityAuthClient from '../../../IdentityAuthClient';

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -15,39 +15,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
-import {SettingLevel} from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    unknownProfileUsers: Array<{
+        userId: string;
+        errorText: string;
+    }>;
+    onInviteAnyways: () => void;
+    onGiveUp: () => void;
+    onFinished: (success: boolean) => void;
+}
 
 @replaceableComponent("views.dialogs.AskInviteAnywayDialog")
-export default class AskInviteAnywayDialog extends React.Component {
-    static propTypes = {
-        unknownProfileUsers: PropTypes.array.isRequired, // [ {userId, errorText}... ]
-        onInviteAnyways: PropTypes.func.isRequired,
-        onGiveUp: PropTypes.func.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onInviteClicked = () => {
+export default class AskInviteAnywayDialog extends React.Component<IProps> {
+    private onInviteClicked = (): void => {
         this.props.onInviteAnyways();
         this.props.onFinished(true);
     };
 
-    _onInviteNeverWarnClicked = () => {
+    private onInviteNeverWarnClicked = (): void => {
         SettingsStore.setValue("promptBeforeInviteUnknownUsers", null, SettingLevel.ACCOUNT, false);
         this.props.onInviteAnyways();
         this.props.onFinished(true);
     };
 
-    _onGiveUpClicked = () => {
+    private onGiveUpClicked = (): void => {
         this.props.onGiveUp();
         this.props.onFinished(false);
     };
 
-    render() {
+    public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         const errorList = this.props.unknownProfileUsers
@@ -55,11 +57,12 @@ export default class AskInviteAnywayDialog extends React.Component {
 
         return (
             <BaseDialog className='mx_RetryInvitesDialog'
-                onFinished={this._onGiveUpClicked}
+                onFinished={this.onGiveUpClicked}
                 title={_t('The following users may not exist')}
                 contentId='mx_Dialog_content'
             >
                 <div id='mx_Dialog_content'>
+                    {/* eslint-disable-next-line */}
                     <p>{_t("Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?")}</p>
                     <ul>
                         { errorList }
@@ -67,13 +70,13 @@ export default class AskInviteAnywayDialog extends React.Component {
                 </div>
 
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this._onGiveUpClicked}>
+                    <button onClick={this.onGiveUpClicked}>
                         { _t('Close') }
                     </button>
-                    <button onClick={this._onInviteNeverWarnClicked}>
+                    <button onClick={this.onInviteNeverWarnClicked}>
                         { _t('Invite anyway and never warn me again') }
                     </button>
-                    <button onClick={this._onInviteClicked} autoFocus={true}>
+                    <button onClick={this.onInviteClicked} autoFocus={true}>
                         { _t('Invite anyway') }
                     </button>
                 </div>

src/components/views/dialogs/BetaFeedbackDialog.tsx

@@ -0,0 +1,111 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from "react";
+
+import QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
+import SdkConfig from "../../../SdkConfig";
+import {IDialogProps} from "./IDialogProps";
+import SettingsStore from "../../../settings/SettingsStore";
+import {submitFeedback} from "../../../rageshake/submit-rageshake";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import { UserTab } from "./UserSettingsDialog";
+
+interface IProps extends IDialogProps {
+    featureId: string;
+}
+
+const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+
+    const [comment, setComment] = useState("");
+    const [canContact, setCanContact] = useState(false);
+
+    const sendFeedback = async (ok: boolean) => {
+        if (!ok) return onFinished(false);
+
+        const extraData = SettingsStore.getBetaInfo(featureId)?.extraSettings.reduce((o, k) => {
+            o[k] = SettingsStore.getValue(k);
+            return o;
+        }, {});
+
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact, extraData);
+        onFinished(true);
+
+        Modal.createTrackedDialog("Beta Dialog Sent", featureId, InfoDialog, {
+            title: _t("Beta feedback"),
+            description: _t("Thank you for your feedback, we really appreciate it."),
+            button: _t("Done"),
+            hasCloseButton: false,
+            fixedWidth: false,
+        });
+    };
+
+    return (<QuestionDialog
+        className="mx_BetaFeedbackDialog"
+        hasCancelButton={true}
+        title={_t("%(featureName)s beta feedback", { featureName: info.title })}
+        description={<React.Fragment>
+            <div className="mx_BetaFeedbackDialog_subheading">
+                { _t(info.feedbackSubheading) }
+                &nbsp;
+                { _t("Your platform and username will be noted to help us use your feedback as much as we can.")}
+
+                <AccessibleButton kind="link" onClick={() => {
+                    onFinished(false);
+                    defaultDispatcher.dispatch({
+                        action: Action.ViewUserSettings,
+                        initialTabId: UserTab.Labs,
+                    });
+                }}>
+                    { _t("To leave the beta, visit your settings.") }
+                </AccessibleButton>
+            </div>
+
+            <Field
+                id="feedbackComment"
+                label={_t("Feedback")}
+                type="text"
+                autoComplete="off"
+                value={comment}
+                element="textarea"
+                onChange={(ev) => {
+                    setComment(ev.target.value);
+                }}
+                autoFocus={true}
+            />
+
+            <StyledCheckbox
+                checked={canContact}
+                onClick={e => setCanContact((e.target as HTMLInputElement).checked)}
+            >
+                { _t("You may contact me if you have any follow up questions") }
+            </StyledCheckbox>
+        </React.Fragment>}
+        button={_t("Send feedback")}
+        buttonDisabled={!comment}
+        onFinished={sendFeedback}
+    />);
+};
+
+export default BetaFeedbackDialog;

src/components/views/dialogs/BugReportDialog.tsx

@@ -18,7 +18,6 @@ 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';
@@ -27,8 +26,27 @@ import sendBugReport, {downloadBugReport} from '../../../rageshake/submit-ragesh
 import AccessibleButton from "../elements/AccessibleButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    onFinished: (success: boolean) => void;
+    initialText?: string;
+    label?: string;
+}
+
+interface IState {
+    sendLogs: boolean;
+    busy: boolean;
+    err: string;
+    issueUrl: string;
+    text: string;
+    progress: string;
+    downloadBusy: boolean;
+    downloadProgress: string;
+}
+
 @replaceableComponent("views.dialogs.BugReportDialog")
-export default class BugReportDialog extends React.Component {
+export default class BugReportDialog extends React.Component<IProps, IState> {
+    private unmounted: boolean;
+
     constructor(props) {
         super(props);
         this.state = {
@@ -41,25 +59,18 @@ export default class BugReportDialog extends React.Component {
             downloadBusy: false,
             downloadProgress: null,
         };
-        this._unmounted = false;
-        this._onSubmit = this._onSubmit.bind(this);
-        this._onCancel = this._onCancel.bind(this);
-        this._onTextChange = this._onTextChange.bind(this);
-        this._onIssueUrlChange = this._onIssueUrlChange.bind(this);
-        this._onSendLogsChange = this._onSendLogsChange.bind(this);
-        this._sendProgressCallback = this._sendProgressCallback.bind(this);
-        this._downloadProgressCallback = this._downloadProgressCallback.bind(this);
+        this.unmounted = false;
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
+    public componentWillUnmount() {
+        this.unmounted = true;
     }
 
-    _onCancel(ev) {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     }
 
-    _onSubmit(ev) {
+    private onSubmit = (): void => {
         if ((!this.state.text || !this.state.text.trim()) && (!this.state.issueUrl || !this.state.issueUrl.trim())) {
             this.setState({
                 err: _t("Please tell us what went wrong or, better, create a GitHub issue that describes the problem."),
@@ -72,15 +83,15 @@ export default class BugReportDialog extends React.Component {
             (this.state.issueUrl.length > 0 ? this.state.issueUrl : 'No issue link given');
 
         this.setState({ busy: true, progress: null, err: null });
-        this._sendProgressCallback(_t("Preparing to send logs"));
+        this.sendProgressCallback(_t("Preparing to send logs"));
 
         sendBugReport(SdkConfig.get().bug_report_endpoint_url, {
             userText,
             sendLogs: true,
-            progressCallback: this._sendProgressCallback,
+            progressCallback: this.sendProgressCallback,
             label: this.props.label,
         }).then(() => {
-            if (!this._unmounted) {
+            if (!this.unmounted) {
                 this.props.onFinished(false);
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 // N.B. first param is passed to piwik and so doesn't want i18n
@@ -91,7 +102,7 @@ export default class BugReportDialog extends React.Component {
                 });
             }
         }, (err) => {
-            if (!this._unmounted) {
+            if (!this.unmounted) {
                 this.setState({
                     busy: false,
                     progress: null,
@@ -101,14 +112,14 @@ export default class BugReportDialog extends React.Component {
         });
     }
 
-    _onDownload = async (ev) => {
+    private onDownload = async (): Promise<void> => {
         this.setState({ downloadBusy: true });
-        this._downloadProgressCallback(_t("Preparing to download logs"));
+        this.downloadProgressCallback(_t("Preparing to download logs"));
 
         try {
             await downloadBugReport({
                 sendLogs: true,
-                progressCallback: this._downloadProgressCallback,
+                progressCallback: this.downloadProgressCallback,
                 label: this.props.label,
             });
 
@@ -117,7 +128,7 @@ export default class BugReportDialog extends React.Component {
                 downloadProgress: null,
             });
         } catch (err) {
-            if (!this._unmounted) {
+            if (!this.unmounted) {
                 this.setState({
                     downloadBusy: false,
                     downloadProgress: _t("Failed to send logs: ") + `${err.message}`,
@@ -126,33 +137,29 @@ export default class BugReportDialog extends React.Component {
         }
     };
 
-    _onTextChange(ev) {
-        this.setState({ text: ev.target.value });
+    private onTextChange = (ev: React.FormEvent<HTMLTextAreaElement>): void => {
+        this.setState({ text: ev.currentTarget.value });
     }
 
-    _onIssueUrlChange(ev) {
-        this.setState({ issueUrl: ev.target.value });
+    private onIssueUrlChange = (ev: React.FormEvent<HTMLInputElement>): void => {
+        this.setState({ issueUrl: ev.currentTarget.value });
     }
 
-    _onSendLogsChange(ev) {
-        this.setState({ sendLogs: ev.target.checked });
-    }
-
-    _sendProgressCallback(progress) {
-        if (this._unmounted) {
+    private sendProgressCallback = (progress: string): void => {
+        if (this.unmounted) {
             return;
         }
-        this.setState({progress: progress});
+        this.setState({ progress });
     }
 
-    _downloadProgressCallback(downloadProgress) {
-        if (this._unmounted) {
+    private downloadProgressCallback = (downloadProgress: string): void => {
+        if (this.unmounted) {
             return;
         }
         this.setState({ downloadProgress });
     }
 
-    render() {
+    public render() {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -183,7 +190,7 @@ export default class BugReportDialog extends React.Component {
         }
 
         return (
-            <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
+            <BaseDialog className="mx_BugReportDialog" onFinished={this.onCancel}
                 title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
@@ -213,7 +220,7 @@ export default class BugReportDialog extends React.Component {
                     </b></p>
 
                     <div className="mx_BugReportDialog_download">
-                        <AccessibleButton onClick={this._onDownload} kind="link" disabled={this.state.downloadBusy}>
+                        <AccessibleButton onClick={this.onDownload} kind="link" disabled={this.state.downloadBusy}>
                             { _t("Download logs") }
                         </AccessibleButton>
                         {this.state.downloadProgress && <span>{this.state.downloadProgress} ...</span>}
@@ -223,7 +230,7 @@ export default class BugReportDialog extends React.Component {
                         type="text"
                         className="mx_BugReportDialog_field_input"
                         label={_t("GitHub issue")}
-                        onChange={this._onIssueUrlChange}
+                        onChange={this.onIssueUrlChange}
                         value={this.state.issueUrl}
                         placeholder="https://github.com/vector-im/element-web/issues/..."
                     />
@@ -232,7 +239,7 @@ export default class BugReportDialog extends React.Component {
                         element="textarea"
                         label={_t("Notes")}
                         rows={5}
-                        onChange={this._onTextChange}
+                        onChange={this.onTextChange}
                         value={this.state.text}
                         placeholder={_t(
                             "If there is additional context that would help in " +
@@ -245,17 +252,12 @@ export default class BugReportDialog extends React.Component {
                     {error}
                 </div>
                 <DialogButtons primaryButton={_t("Send logs")}
-                    onPrimaryButtonClick={this._onSubmit}
+                    onPrimaryButtonClick={this.onSubmit}
                     focus={true}
-                    onCancel={this._onCancel}
+                    onCancel={this.onCancel}
                     disabled={this.state.busy}
                 />
             </BaseDialog>
         );
     }
 }
-
-BugReportDialog.propTypes = {
-    onFinished: PropTypes.func.isRequired,
-    initialText: PropTypes.string,
-};

src/components/views/dialogs/ChangelogDialog.tsx

@@ -16,21 +16,26 @@ Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import request from 'browser-request';
 import { _t } from '../../../languageHandler';
 
+interface IProps {
+    newVersion: string;
+    version: string;
+    onFinished: (success: boolean) => void;
+}
+
 const REPOS = ['vector-im/element-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
 
-export default class ChangelogDialog extends React.Component {
+export default class ChangelogDialog extends React.Component<IProps> {
     constructor(props) {
         super(props);
 
         this.state = {};
     }
 
-    componentDidMount() {
+    public componentDidMount() {
         const version = this.props.newVersion.split('-');
         const version2 = this.props.version.split('-');
         if (version == null || version2 == null) return;
@@ -49,7 +54,7 @@ export default class ChangelogDialog extends React.Component {
         }
     }
 
-    _elementsForCommit(commit) {
+    private elementsForCommit(commit): JSX.Element {
         return (
             <li key={commit.sha} className="mx_ChangelogDialog_li">
                 <a href={commit.html_url} target="_blank" rel="noreferrer noopener">
@@ -59,7 +64,7 @@ export default class ChangelogDialog extends React.Component {
         );
     }
 
-    render() {
+    public render() {
         const Spinner = sdk.getComponent('views.elements.Spinner');
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
 
@@ -72,7 +77,7 @@ export default class ChangelogDialog extends React.Component {
                     msg: this.state[repo],
                 });
             } else {
-                content = this.state[repo].map(this._elementsForCommit);
+                content = this.state[repo].map(this.elementsForCommit);
             }
             return (
                 <div key={repo}>
@@ -99,9 +104,3 @@ export default class ChangelogDialog extends React.Component {
         );
     }
 }
-
-ChangelogDialog.propTypes = {
-    version: PropTypes.string.isRequired,
-    newVersion: PropTypes.string.isRequired,
-    onFinished: PropTypes.func.isRequired,
-};

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -17,7 +17,17 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    redact: () => Promise<void>;
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    isRedacting: boolean;
+    redactionErrorCode: string | number;
+}
 
 /*
  * A dialog for confirming a redaction.
@@ -32,7 +42,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  * To avoid this, we keep the dialog open as long as /redact is in progress.
  */
 @replaceableComponent("views.dialogs.ConfirmAndWaitRedactDialog")
-export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
+export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
@@ -41,7 +51,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
         };
     }
 
-    onParentFinished = async (proceed) => {
+    public onParentFinished = async (proceed: boolean): Promise<void> => {
         if (proceed) {
             this.setState({isRedacting: true});
             try {
@@ -60,7 +70,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
         }
     };
 
-    render() {
+    public render() {
         if (this.state.isRedacting) {
             if (this.state.redactionErrorCode) {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -19,11 +19,15 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
 /*
  * A dialog for confirming a redaction.
  */
 @replaceableComponent("views.dialogs.ConfirmRedactDialog")
-export default class ConfirmRedactDialog extends React.Component {
+export default class ConfirmRedactDialog extends React.Component<IProps> {
     render() {
         const TextInputDialog = sdk.getComponent('views.dialogs.TextInputDialog');
         return (

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -15,13 +15,31 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+
+interface IProps {
+    // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
+    member: RoomMember;
+    // group member object. Supply either this or 'member'
+    groupMember: GroupMemberType;
+    // needed if a group member is specified
+    matrixClient?: MatrixClient,
+    action: string; // eg. 'Ban'
+    title: string; // eg. 'Ban this user?'
+
+    // Whether to display a text field for a reason
+    // If true, the second argument to onFinished will
+    // be the string entered.
+    askReason?: boolean;
+    danger?: boolean;
+    onFinished: (success: boolean, reason?: string) => void;
+}
 
 /*
  * A dialog for confirming an operation on another user.
@@ -32,53 +50,23 @@ import {mediaFromMxc} from "../../../customisations/Media";
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
 @replaceableComponent("views.dialogs.ConfirmUserActionDialog")
-export default class ConfirmUserActionDialog extends React.Component {
-    static propTypes = {
-        // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
-        member: PropTypes.object,
-        // group member object. Supply either this or 'member'
-        groupMember: GroupMemberType,
-        // needed if a group member is specified
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-        action: PropTypes.string.isRequired, // eg. 'Ban'
-        title: PropTypes.string.isRequired, // eg. 'Ban this user?'
-
-        // Whether to display a text field for a reason
-        // If true, the second argument to onFinished will
-        // be the string entered.
-        askReason: PropTypes.bool,
-        danger: PropTypes.bool,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class ConfirmUserActionDialog extends React.Component<IProps> {
+    private reasonField: React.RefObject<HTMLInputElement> = React.createRef();
 
     static defaultProps = {
         danger: false,
         askReason: false,
     };
 
-    constructor(props) {
-        super(props);
-
-        this._reasonField = null;
-    }
-
-    onOk = () => {
-        let reason;
-        if (this._reasonField) {
-            reason = this._reasonField.value;
-        }
-        this.props.onFinished(true, reason);
+    public onOk = (): void => {
+        this.props.onFinished(true, this.reasonField.current?.value);
     };
 
-    onCancel = () => {
+    public onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    _collectReasonField = e => {
-        this._reasonField = e;
-    };
-
-    render() {
+    public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
@@ -92,7 +80,7 @@ export default class ConfirmUserActionDialog extends React.Component {
                 <div>
                     <form onSubmit={this.onOk}>
                         <input className="mx_ConfirmUserActionDialog_reasonField"
-                            ref={this._collectReasonField}
+                            ref={this.reasonField}
                             placeholder={_t("Reason")}
                             autoFocus={true}
                         />

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -15,22 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.dialogs.ConfirmWipeDeviceDialog")
-export default class ConfirmWipeDeviceDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
 
-    _onConfirm = () => {
+@replaceableComponent("views.dialogs.ConfirmWipeDeviceDialog")
+export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
+    private onConfirm = (): void => {
         this.props.onFinished(true);
     };
 
-    _onDecline = () => {
+    private onDecline = (): void => {
         this.props.onFinished(false);
     };
 
@@ -55,10 +54,10 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Clear all data")}
-                    onPrimaryButtonClick={this._onConfirm}
+                    onPrimaryButtonClick={this.onConfirm}
                     primaryButtonClass="danger"
                     cancelButton={_t("Cancel")}
-                    onCancel={this._onDecline}
+                    onCancel={this.onDecline}
                 />
             </BaseDialog>
         );

src/components/views/dialogs/CreateGroupDialog.tsx

@@ -15,44 +15,51 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.dialogs.CreateGroupDialog")
-export default class CreateGroupDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
 
-    state = {
+interface IState {
+    groupName: string;
+    groupId: string;
+    groupIdError: string;
+    creating: boolean;
+    createError: Error;
+}
+
+@replaceableComponent("views.dialogs.CreateGroupDialog")
+export default class CreateGroupDialog extends React.Component<IProps, IState> {
+    public state = {
         groupName: '',
         groupId: '',
-        groupError: null,
+        groupIdError: '',
         creating: false,
         createError: null,
     };
 
-    _onGroupNameChange = e => {
+    private onGroupNameChange = (e: React.FormEvent<HTMLInputElement>): void => {
         this.setState({
-            groupName: e.target.value,
+            groupName: e.currentTarget.value,
         });
     };
 
-    _onGroupIdChange = e => {
+    private onGroupIdChange = (e: React.FormEvent<HTMLInputElement>): void => {
         this.setState({
-            groupId: e.target.value,
+            groupId: e.currentTarget.value,
         });
     };
 
-    _onGroupIdBlur = e => {
-        this._checkGroupId();
+    private onGroupIdBlur = (): void => {
+        this.checkGroupId();
     };
 
-    _checkGroupId(e) {
+    private checkGroupId() {
         let error = null;
         if (!this.state.groupId) {
             error = _t("Community IDs cannot be empty.");
@@ -67,12 +74,12 @@ export default class CreateGroupDialog extends React.Component {
         return error;
     }
 
-    _onFormSubmit = e => {
+    private onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
-        if (this._checkGroupId()) return;
+        if (this.checkGroupId()) return;
 
-        const profile = {};
+        const profile: any = {};
         if (this.state.groupName !== '') {
             profile.name = this.state.groupName;
         }
@@ -121,7 +128,7 @@ export default class CreateGroupDialog extends React.Component {
             <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
                 title={_t('Create Community')}
             >
-                <form onSubmit={this._onFormSubmit}>
+                <form onSubmit={this.onFormSubmit}>
                     <div className="mx_Dialog_content">
                         <div className="mx_CreateGroupDialog_inputRow">
                             <div className="mx_CreateGroupDialog_label">
@@ -129,9 +136,9 @@ export default class CreateGroupDialog extends React.Component {
                             </div>
                             <div>
                                 <input id="groupname" className="mx_CreateGroupDialog_input"
-                                    autoFocus={true} size="64"
+                                    autoFocus={true} size={64}
                                     placeholder={_t('Example')}
-                                    onChange={this._onGroupNameChange}
+                                    onChange={this.onGroupNameChange}
                                     value={this.state.groupName}
                                 />
                             </div>
@@ -144,10 +151,10 @@ export default class CreateGroupDialog extends React.Component {
                                 <span className="mx_CreateGroupDialog_prefix">+</span>
                                 <input id="groupid"
                                     className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix"
-                                    size="32"
+                                    size={32}
                                     placeholder={_t('example')}
-                                    onChange={this._onGroupIdChange}
-                                    onBlur={this._onGroupIdBlur}
+                                    onChange={this.onGroupIdChange}
+                                    onBlur={this.onGroupIdBlur}
                                     value={this.state.groupId}
                                 />
                                 <span className="mx_CreateGroupDialog_suffix">

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
-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.
@@ -15,27 +15,47 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
-import withValidation from '../elements/Validation';
+import withValidation, { IFieldState } from '../elements/Validation';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {Key} from "../../../Keyboard";
-import {privateShouldBeEncrypted} from "../../../createRoom";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { Key } from "../../../Keyboard";
+import { IOpts, privateShouldBeEncrypted } from "../../../createRoom";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import DialogButtons from "../elements/DialogButtons";
+import BaseDialog from "../dialogs/BaseDialog";
+import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
+
+interface IProps {
+    defaultPublic?: boolean;
+    defaultName?: string;
+    parentSpace?: Room;
+    onFinished(proceed: boolean, opts?: IOpts): void;
+}
+
+interface IState {
+    isPublic: boolean;
+    isEncrypted: boolean;
+    name: string;
+    topic: string;
+    alias: string;
+    detailsOpen: boolean;
+    noFederate: boolean;
+    nameIsValid: boolean;
+    canChangeEncryption: boolean;
+}
 
 @replaceableComponent("views.dialogs.CreateRoomDialog")
-export default class CreateRoomDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        defaultPublic: PropTypes.bool,
-        parentSpace: PropTypes.instanceOf(Room),
-    };
+export default class CreateRoomDialog extends React.Component<IProps, IState> {
+    private nameField = createRef<Field>();
+    private aliasField = createRef<RoomAliasField>();
 
     constructor(props) {
         super(props);
@@ -44,7 +64,7 @@ export default class CreateRoomDialog extends React.Component {
         this.state = {
             isPublic: this.props.defaultPublic || false,
             isEncrypted: privateShouldBeEncrypted(),
-            name: "",
+            name: this.props.defaultName || "",
             topic: "",
             alias: "",
             detailsOpen: false,
@@ -53,27 +73,26 @@ export default class CreateRoomDialog extends React.Component {
             canChangeEncryption: true,
         };
 
-        MatrixClientPeg.get().doesServerForceEncryptionForPreset("private")
-            .then(isForced => this.setState({canChangeEncryption: !isForced}));
+        MatrixClientPeg.get().doesServerForceEncryptionForPreset(Preset.PrivateChat)
+            .then(isForced => this.setState({ canChangeEncryption: !isForced }));
     }
 
-    _roomCreateOptions() {
-        const opts = {};
-        const createOpts = opts.createOpts = {};
+    private roomCreateOptions() {
+        const opts: IOpts = {};
+        const createOpts: IOpts["createOpts"] = opts.createOpts = {};
         createOpts.name = this.state.name;
         if (this.state.isPublic) {
-            createOpts.visibility = "public";
-            createOpts.preset = "public_chat";
+            createOpts.visibility = Visibility.Public;
+            createOpts.preset = Preset.PublicChat;
             opts.guestAccess = false;
-            const {alias} = this.state;
-            const localPart = alias.substr(1, alias.indexOf(":") - 1);
-            createOpts['room_alias_name'] = localPart;
+            const { alias } = this.state;
+            createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1);
         }
         if (this.state.topic) {
             createOpts.topic = this.state.topic;
         }
         if (this.state.noFederate) {
-            createOpts.creation_content = {'m.federate': false};
+            createOpts.creation_content = { 'm.federate': false };
         }
 
         if (!this.state.isPublic) {
@@ -98,16 +117,14 @@ export default class CreateRoomDialog extends React.Component {
     }
 
     componentDidMount() {
-        this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
         // move focus to first field when showing dialog
-        this._nameFieldRef.focus();
+        this.nameField.current.focus();
     }
 
     componentWillUnmount() {
-        this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
     }
 
-    _onKeyDown = event => {
+    private onKeyDown = (event: KeyboardEvent) => {
         if (event.key === Key.ENTER) {
             this.onOk();
             event.preventDefault();
@@ -115,26 +132,26 @@ export default class CreateRoomDialog extends React.Component {
         }
     };
 
-    onOk = async () => {
-        const activeElement = document.activeElement;
+    private onOk = async () => {
+        const activeElement = document.activeElement as HTMLElement;
         if (activeElement) {
             activeElement.blur();
         }
-        await this._nameFieldRef.validate({allowEmpty: false});
-        if (this._aliasFieldRef) {
-            await this._aliasFieldRef.validate({allowEmpty: false});
+        await this.nameField.current.validate({allowEmpty: false});
+        if (this.aliasField.current) {
+            await this.aliasField.current.validate({allowEmpty: false});
         }
         // Validation and state updates are async, so we need to wait for them to complete
         // first. Queue a `setState` callback and wait for it to resolve.
-        await new Promise(resolve => this.setState({}, resolve));
-        if (this.state.nameIsValid && (!this._aliasFieldRef || this._aliasFieldRef.isValid)) {
-            this.props.onFinished(true, this._roomCreateOptions());
+        await new Promise<void>(resolve => this.setState({}, resolve));
+        if (this.state.nameIsValid && (!this.aliasField.current || this.aliasField.current.isValid)) {
+            this.props.onFinished(true, this.roomCreateOptions());
         } else {
             let field;
             if (!this.state.nameIsValid) {
-                field = this._nameFieldRef;
-            } else if (this._aliasFieldRef && !this._aliasFieldRef.isValid) {
-                field = this._aliasFieldRef;
+                field = this.nameField.current;
+            } else if (this.aliasField.current && !this.aliasField.current.isValid) {
+                field = this.aliasField.current;
             }
             if (field) {
                 field.focus();
@@ -143,49 +160,45 @@ export default class CreateRoomDialog extends React.Component {
         }
     };
 
-    onCancel = () => {
+    private onCancel = () => {
         this.props.onFinished(false);
     };
 
-    onNameChange = ev => {
-        this.setState({name: ev.target.value});
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ name: ev.target.value });
     };
 
-    onTopicChange = ev => {
-        this.setState({topic: ev.target.value});
+    private onTopicChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ topic: ev.target.value });
     };
 
-    onPublicChange = isPublic => {
-        this.setState({isPublic});
+    private onPublicChange = (isPublic: boolean) => {
+        this.setState({ isPublic });
     };
 
-    onEncryptedChange = isEncrypted => {
-        this.setState({isEncrypted});
+    private onEncryptedChange = (isEncrypted: boolean) => {
+        this.setState({ isEncrypted });
     };
 
-    onAliasChange = alias => {
-        this.setState({alias});
+    private onAliasChange = (alias: string) => {
+        this.setState({ alias });
     };
 
-    onDetailsToggled = ev => {
-        this.setState({detailsOpen: ev.target.open});
+    private onDetailsToggled = (ev: SyntheticEvent<HTMLDetailsElement>) => {
+        this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
     };
 
-    onNoFederateChange = noFederate => {
-        this.setState({noFederate});
+    private onNoFederateChange = (noFederate: boolean) => {
+        this.setState({ noFederate });
     };
 
-    collectDetailsRef = ref => {
-        this._detailsRef = ref;
-    };
-
-    onNameValidate = async fieldState => {
-        const result = await CreateRoomDialog._validateRoomName(fieldState);
+    private onNameValidate = async (fieldState: IFieldState) => {
+        const result = await CreateRoomDialog.validateRoomName(fieldState);
         this.setState({nameIsValid: result.valid});
         return result;
     };
 
-    static _validateRoomName = withValidation({
+    private static validateRoomName = withValidation({
         rules: [
             {
                 key: "required",
@@ -196,18 +209,17 @@ export default class CreateRoomDialog extends React.Component {
     });
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Field = sdk.getComponent('views.elements.Field');
-        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
-        const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
-
         let aliasField;
         if (this.state.isPublic) {
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
-                    <RoomAliasField ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
+                    <RoomAliasField
+                        ref={this.aliasField}
+                        onChange={this.onAliasChange}
+                        domain={domain}
+                        value={this.state.alias}
+                    />
                 </div>
             );
         }
@@ -270,16 +282,34 @@ export default class CreateRoomDialog extends React.Component {
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
                 title={title}
             >
-                <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
+                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                     <div className="mx_Dialog_content">
-                        <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
-                        <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
+                        <Field
+                            ref={this.nameField}
+                            label={_t('Name')}
+                            onChange={this.onNameChange}
+                            onValidate={this.onNameValidate}
+                            value={this.state.name}
+                            className="mx_CreateRoomDialog_name"
+                        />
+                        <Field
+                            label={_t('Topic (optional)')}
+                            onChange={this.onTopicChange}
+                            value={this.state.topic}
+                            className="mx_CreateRoomDialog_topic"
+                        />
+                        <LabelledToggleSwitch
+                            label={_t("Make this room public")}
+                            onChange={this.onPublicChange}
+                            value={this.state.isPublic}
+                        />
                         { publicPrivateLabel }
                         { e2eeSection }
                         { aliasField }
-                        <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
-                            <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>
+                        <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
+                            <summary className="mx_CreateRoomDialog_details_summary">
+                                { this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }
+                            </summary>
                             <LabelledToggleSwitch
                                 label={_t(
                                     "Block anyone not part of %(serverName)s from ever joining this room.",

src/components/views/dialogs/CryptoStoreTooNewDialog.tsx

@@ -22,7 +22,11 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 
-export default (props) => {
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+export default (props: IProps) => {
     const brand = SdkConfig.get().brand;
 
     const _onLogoutClicked = () => {
@@ -40,7 +44,7 @@ export default (props) => {
             onFinished: (doLogout) => {
                 if (doLogout) {
                     dis.dispatch({action: 'logout'});
-                    props.onFinished();
+                    props.onFinished(true);
                 }
             },
         });

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
@@ -28,8 +27,25 @@ import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/Interactiv
 import StyledCheckbox from "../elements/StyledCheckbox";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    shouldErase: boolean;
+    errStr: string;
+    authData: any; // for UIA
+    authEnabled: boolean; // see usages for information
+
+    // A few strings that are passed to InteractiveAuth for design or are displayed
+    // next to the InteractiveAuth component.
+    bodyText: string;
+    continueText: string;
+    continueKind: string;
+}
+
 @replaceableComponent("views.dialogs.DeactivateAccountDialog")
-export default class DeactivateAccountDialog extends React.Component {
+export default class DeactivateAccountDialog extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
@@ -46,10 +62,10 @@ export default class DeactivateAccountDialog extends React.Component {
             continueKind: null,
         };
 
-        this._initAuth(/* shouldErase= */false);
+        this.initAuth(/* shouldErase= */false);
     }
 
-    _onStagePhaseChange = (stage, phase) => {
+    private onStagePhaseChange = (stage: string, phase: string): void => {
         const dialogAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
@@ -87,19 +103,19 @@ export default class DeactivateAccountDialog extends React.Component {
         this.setState({bodyText, continueText, continueKind});
     };
 
-    _onUIAuthFinished = (success, result, extra) => {
+    private onUIAuthFinished = (success: boolean, result: Error) => {
         if (success) return; // great! makeRequest() will be called too.
 
         if (result === ERROR_USER_CANCELLED) {
-            this._onCancel();
+            this.onCancel();
             return;
         }
 
-        console.error("Error during UI Auth:", {result, extra});
+        console.error("Error during UI Auth:", { result });
         this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
     };
 
-    _onUIAuthComplete = (auth) => {
+    private onUIAuthComplete = (auth: any): void => {
         MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => {
             // Deactivation worked - logout & close this dialog
             Analytics.trackEvent('Account', 'Deactivate Account');
@@ -111,9 +127,9 @@ export default class DeactivateAccountDialog extends React.Component {
         });
     };
 
-    _onEraseFieldChange = (ev) => {
+    private onEraseFieldChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.setState({
-            shouldErase: ev.target.checked,
+            shouldErase: ev.currentTarget.checked,
 
             // Disable the auth form because we're going to have to reinitialize the auth
             // information. We do this because we can't modify the parameters in the UIA
@@ -123,14 +139,14 @@ export default class DeactivateAccountDialog extends React.Component {
         });
 
         // As mentioned above, set up for auth again to get updated UIA session info
-        this._initAuth(/* shouldErase= */ev.target.checked);
+        this.initAuth(/* shouldErase= */ev.currentTarget.checked);
     };
 
-    _onCancel() {
+    private onCancel(): void {
         this.props.onFinished(false);
     }
 
-    _initAuth(shouldErase) {
+    private initAuth(shouldErase: boolean): void {
         MatrixClientPeg.get().deactivateAccount(null, shouldErase).then(r => {
             // If we got here, oops. The server didn't require any auth.
             // Our application lifecycle will catch the error and do the logout bits.
@@ -148,7 +164,7 @@ export default class DeactivateAccountDialog extends React.Component {
         });
     }
 
-    render() {
+    public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         let error = null;
@@ -166,9 +182,9 @@ export default class DeactivateAccountDialog extends React.Component {
                     <InteractiveAuth
                         matrixClient={MatrixClientPeg.get()}
                         authData={this.state.authData}
-                        makeRequest={this._onUIAuthComplete}
-                        onAuthFinished={this._onUIAuthFinished}
-                        onStagePhaseChange={this._onStagePhaseChange}
+                        makeRequest={this.onUIAuthComplete}
+                        onAuthFinished={this.onUIAuthFinished}
+                        onStagePhaseChange={this.onStagePhaseChange}
                         continueText={this.state.continueText}
                         continueKind={this.state.continueKind}
                     />
@@ -214,7 +230,7 @@ export default class DeactivateAccountDialog extends React.Component {
                         <p>
                             <StyledCheckbox
                                 checked={this.state.shouldErase}
-                                onChange={this._onEraseFieldChange}
+                                onChange={this.onEraseFieldChange}
                             >
                                 {_t(
                                     "Please forget all messages I have sent when my account is deactivated " +
@@ -235,7 +251,3 @@ export default class DeactivateAccountDialog extends React.Component {
         );
     }
 }
-
-DeactivateAccountDialog.propTypes = {
-    onFinished: PropTypes.func.isRequired,
-};

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState, useEffect} from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, ChangeEvent, MouseEvent } from 'react';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 
 import {
     PHASE_UNSENT,
@@ -30,27 +30,33 @@ import {
     PHASE_DONE,
     PHASE_STARTED,
     PHASE_CANCELLED,
+    VerificationRequest,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import WidgetStore from "../../../stores/WidgetStore";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import {SETTINGS} from "../../../settings/Settings";
-import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
+import WidgetStore, { IApp } from "../../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { SETTINGS } from "../../../settings/Settings";
+import SettingsStore, { LEVEL_ORDER } from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { SettingLevel } from '../../../settings/SettingLevel';
 
-class GenericEditor extends React.PureComponent {
-    // static propTypes = {onBack: PropTypes.func.isRequired};
+interface IGenericEditorProps {
+    onBack: () => void;
+}
 
-    constructor(props) {
-        super(props);
-        this._onChange = this._onChange.bind(this);
-        this.onBack = this.onBack.bind(this);
-    }
+interface IGenericEditorState {
+    message?: string;
+    [inputId: string]: boolean | string;
+}
 
-    onBack() {
+abstract class GenericEditor<
+    P extends IGenericEditorProps = IGenericEditorProps,
+    S extends IGenericEditorState = IGenericEditorState,
+> extends React.PureComponent<P, S> {
+    protected onBack = () => {
         if (this.state.message) {
             this.setState({ message: null });
         } else {
@@ -58,47 +64,60 @@ class GenericEditor extends React.PureComponent {
         }
     }
 
-    _onChange(e) {
+    protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        // @ts-ignore: Unsure how to convince TS this is okay when the state
+        // type can be extended.
         this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
     }
 
-    _buttons() {
+    protected abstract send();
+
+    protected buttons(): React.ReactNode {
         return <div className="mx_Dialog_buttons">
             <button onClick={this.onBack}>{ _t('Back') }</button>
-            { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+            { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
         </div>;
     }
 
-    textInput(id, label) {
+    protected textInput(id: string, label: string): React.ReactNode {
         return <Field
             id={id}
             label={label}
-            size="42"
+            size={42}
             autoFocus={true}
             type="text"
             autoComplete="on"
-            value={this.state[id]}
-            onChange={this._onChange}
+            value={this.state[id] as string}
+            onChange={this.onChange}
         />;
     }
 }
 
-export class SendCustomEvent extends GenericEditor {
-    static getLabel() { return _t('Send Custom Event'); }
-
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-        forceStateEvent: PropTypes.bool,
-        forceGeneralEvent: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendCustomEventProps extends IGenericEditorProps {
+    room: Room;
+    forceStateEvent?: boolean;
+    forceGeneralEvent?: boolean;
+    inputs?: {
+        eventType?: string;
+        stateKey?: string;
+        evContent?: string;
     };
+}
+
+interface ISendCustomEventState extends IGenericEditorState {
+    isStateEvent: boolean;
+    eventType: string;
+    stateKey: string;
+    evContent: string;
+}
+
+export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendCustomEventState> {
+    static getLabel() { return _t('Send Custom Event'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
-        this._send = this._send.bind(this);
 
         const {eventType, stateKey, evContent} = Object.assign({
             eventType: '',
@@ -115,7 +134,7 @@ export class SendCustomEvent extends GenericEditor {
         };
     }
 
-    send(content) {
+    private doSend(content: object): Promise<void> {
         const cli = this.context;
         if (this.state.isStateEvent) {
             return cli.sendStateEvent(this.props.room.roomId, this.state.eventType, content, this.state.stateKey);
@@ -124,7 +143,7 @@ export class SendCustomEvent extends GenericEditor {
         }
     }
 
-    async _send() {
+    protected send = async () => {
         if (this.state.eventType === '') {
             this.setState({ message: _t('You must specify an event type!') });
             return;
@@ -133,7 +152,7 @@ export class SendCustomEvent extends GenericEditor {
         let message;
         try {
             const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
             message = _t('Event sent!');
         } catch (e) {
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@@ -147,7 +166,7 @@ export class SendCustomEvent extends GenericEditor {
                 <div className="mx_Dialog_content">
                     { this.state.message }
                 </div>
-                { this._buttons() }
+                { this.buttons() }
             </div>;
         }
 
@@ -163,35 +182,51 @@ export class SendCustomEvent extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                 { showTglFlip && <div style={{float: "right"}}>
-                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
+                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isStateEvent}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Event"
+                        data-tg-on="State Event"
+                        htmlFor="isStateEvent"
+                    />
                 </div> }
             </div>
         </div>;
     }
 }
 
-class SendAccountData extends GenericEditor {
-    static getLabel() { return _t('Send Account Data'); }
-
-    static propTypes = {
-        room: PropTypes.instanceOf(Room).isRequired,
-        isRoomAccountData: PropTypes.bool,
-        forceMode: PropTypes.bool,
-        inputs: PropTypes.object,
+interface ISendAccountDataProps extends IGenericEditorProps {
+    room: Room;
+    isRoomAccountData: boolean;
+    forceMode: boolean;
+    inputs?: {
+        eventType?: string;
+        evContent?: string;
     };
+}
+
+interface ISendAccountDataState extends IGenericEditorState {
+    isRoomAccountData: boolean;
+    eventType: string;
+    evContent: string;
+}
+
+class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountDataState> {
+    static getLabel() { return _t('Send Account Data'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
-        this._send = this._send.bind(this);
 
         const {eventType, evContent} = Object.assign({
             eventType: '',
@@ -206,7 +241,7 @@ class SendAccountData extends GenericEditor {
         };
     }
 
-    send(content) {
+    private doSend(content: object): Promise<void> {
         const cli = this.context;
         if (this.state.isRoomAccountData) {
             return cli.setRoomAccountData(this.props.room.roomId, this.state.eventType, content);
@@ -214,7 +249,7 @@ class SendAccountData extends GenericEditor {
         return cli.setAccountData(this.state.eventType, content);
     }
 
-    async _send() {
+    protected send = async () => {
         if (this.state.eventType === '') {
             this.setState({ message: _t('You must specify an event type!') });
             return;
@@ -223,7 +258,7 @@ class SendAccountData extends GenericEditor {
         let message;
         try {
             const content = JSON.parse(this.state.evContent);
-            await this.send(content);
+            await this.doSend(content);
             message = _t('Event sent!');
         } catch (e) {
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
@@ -237,7 +272,7 @@ class SendAccountData extends GenericEditor {
                 <div className="mx_Dialog_content">
                     { this.state.message }
                 </div>
-                { this._buttons() }
+                { this.buttons() }
             </div>;
         }
 
@@ -247,14 +282,23 @@ class SendAccountData extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this.onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
                 { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        disabled={this.props.forceMode}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
                 </div> }
             </div>
         </div>;
@@ -264,17 +308,22 @@ class SendAccountData extends GenericEditor {
 const INITIAL_LOAD_TILES = 20;
 const LOAD_TILES_STEP_SIZE = 50;
 
-class FilteredList extends React.PureComponent {
-    static propTypes = {
-        children: PropTypes.any,
-        query: PropTypes.string,
-        onChange: PropTypes.func,
-    };
+interface IFilteredListProps {
+    children: React.ReactElement[];
+    query: string;
+    onChange: (value: string) => void;
+}
 
-    static filterChildren(children, query) {
+interface IFilteredListState {
+    filteredChildren: React.ReactElement[];
+    truncateAt: number;
+}
+
+class FilteredList extends React.PureComponent<IFilteredListProps, IFilteredListState> {
+    static filterChildren(children: React.ReactElement[], query: string): React.ReactElement[] {
         if (!query) return children;
         const lcQuery = query.toLowerCase();
-        return children.filter((child) => child.key.toLowerCase().includes(lcQuery));
+        return children.filter((child) => child.key.toString().toLowerCase().includes(lcQuery));
     }
 
     constructor(props) {
@@ -295,27 +344,27 @@ class FilteredList extends React.PureComponent {
         });
     }
 
-    showAll = () => {
+    private showAll = () => {
         this.setState({
             truncateAt: this.state.truncateAt + LOAD_TILES_STEP_SIZE,
         });
     };
 
-    createOverflowElement = (overflowCount: number, totalCount: number) => {
+    private createOverflowElement = (overflowCount: number, totalCount: number) => {
         return <button className="mx_DevTools_RoomStateExplorer_button" onClick={this.showAll}>
             { _t("and %(count)s others...", { count: overflowCount }) }
         </button>;
     };
 
-    onQuery = (ev) => {
+    private onQuery = (ev: ChangeEvent<HTMLInputElement>) => {
         if (this.props.onChange) this.props.onChange(ev.target.value);
     };
 
-    getChildren = (start: number, end: number) => {
+    private getChildren = (start: number, end: number): React.ReactElement[] => {
         return this.state.filteredChildren.slice(start, end);
     };
 
-    getChildCount = (): number => {
+    private getChildCount = (): number => {
         return this.state.filteredChildren.length;
     };
 
@@ -336,28 +385,31 @@ class FilteredList extends React.PureComponent {
     }
 }
 
-class RoomStateExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Room State'); }
+interface IExplorerProps {
+    room: Room;
+    onBack: () => void;
+}
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+interface IRoomStateExplorerState {
+    eventType?: string;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+    queryStateKey: string;
+}
+
+class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateExplorerState> {
+    static getLabel() { return _t('Explore Room State'); }
 
     static contextType = MatrixClientContext;
 
-    roomStateEvents: Map<string, Map<string, MatrixEvent>>;
+    private roomStateEvents: Map<string, Map<string, MatrixEvent>>;
 
     constructor(props) {
         super(props);
 
         this.roomStateEvents = this.props.room.currentState.events;
 
-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-        this.onQueryStateKey = this.onQueryStateKey.bind(this);
-
         this.state = {
             eventType: null,
             event: null,
@@ -368,19 +420,19 @@ class RoomStateExplorer extends React.PureComponent {
         };
     }
 
-    browseEventType(eventType) {
+    private browseEventType(eventType: string) {
         return () => {
             this.setState({ eventType });
         };
     }
 
-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
         return () => {
             this.setState({ event });
         };
     }
 
-    onBack() {
+    private onBack = () => {
         if (this.state.editing) {
             this.setState({ editing: false });
         } else if (this.state.event) {
@@ -392,15 +444,15 @@ class RoomStateExplorer extends React.PureComponent {
         }
     }
 
-    editEv() {
+    private editEv = () => {
         this.setState({ editing: true });
     }
 
-    onQueryEventType(filterEventType) {
+    private onQueryEventType = (filterEventType: string) => {
         this.setState({ queryEventType: filterEventType });
     }
 
-    onQueryStateKey(filterStateKey) {
+    private onQueryStateKey = (filterStateKey: string) => {
         this.setState({ queryStateKey: filterStateKey });
     }
 
@@ -472,24 +524,22 @@ class RoomStateExplorer extends React.PureComponent {
     }
 }
 
-class AccountDataExplorer extends React.PureComponent {
-    static getLabel() { return _t('Explore Account Data'); }
+interface IAccountDataExplorerState {
+    [inputId: string]: boolean | string | any;
+    isRoomAccountData: boolean;
+    event?: MatrixEvent;
+    editing: boolean;
+    queryEventType: string;
+}
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
+class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDataExplorerState> {
+    static getLabel() { return _t('Explore Account Data'); }
 
     static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
 
-        this.onBack = this.onBack.bind(this);
-        this.editEv = this.editEv.bind(this);
-        this._onChange = this._onChange.bind(this);
-        this.onQueryEventType = this.onQueryEventType.bind(this);
-
         this.state = {
             isRoomAccountData: false,
             event: null,
@@ -499,20 +549,20 @@ class AccountDataExplorer extends React.PureComponent {
         };
     }
 
-    getData() {
+    private getData(): Record<string, MatrixEvent> {
         if (this.state.isRoomAccountData) {
             return this.props.room.accountData;
         }
         return this.context.store.accountData;
     }
 
-    onViewSourceClick(event) {
+    private onViewSourceClick(event: MatrixEvent) {
         return () => {
             this.setState({ event });
         };
     }
 
-    onBack() {
+    private onBack = () => {
         if (this.state.editing) {
             this.setState({ editing: false });
         } else if (this.state.event) {
@@ -522,15 +572,15 @@ class AccountDataExplorer extends React.PureComponent {
         }
     }
 
-    _onChange(e) {
+    private onChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
     }
 
-    editEv() {
+    private editEv = () => {
         this.setState({ editing: true });
     }
 
-    onQueryEventType(queryEventType) {
+    private onQueryEventType = (queryEventType: string) => {
         this.setState({ queryEventType });
     }
 
@@ -580,30 +630,39 @@ class AccountDataExplorer extends React.PureComponent {
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                { !this.state.message && <div style={{float: "right"}}>
-                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
-                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
-                </div> }
+                <div style={{float: "right"}}>
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
+                        type="checkbox"
+                        checked={this.state.isRoomAccountData}
+                        onChange={this.onChange}
+                    />
+                    <label className="mx_DevTools_tgl-btn"
+                        data-tg-off="Account Data"
+                        data-tg-on="Room Data"
+                        htmlFor="isRoomAccountData"
+                    />
+                </div>
             </div>
         </div>;
     }
 }
 
-class ServersInRoomList extends React.PureComponent {
+interface IServersInRoomListState {
+    query: string;
+}
+
+class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRoomListState> {
     static getLabel() { return _t('View Servers in Room'); }
 
-    static propTypes = {
-        onBack: PropTypes.func.isRequired,
-        room: PropTypes.instanceOf(Room).isRequired,
-    };
-
     static contextType = MatrixClientContext;
 
+    private servers: React.ReactElement[];
+
     constructor(props) {
         super(props);
 
         const room = this.props.room;
-        const servers = new Set();
+        const servers = new Set<string>();
         room.currentState.getStateEvents("m.room.member").forEach(ev => servers.add(ev.getSender().split(":")[1]));
         this.servers = Array.from(servers).map(s =>
             <button key={s} className="mx_DevTools_ServersInRoomList_button">
@@ -615,7 +674,7 @@ class ServersInRoomList extends React.PureComponent {
         };
     }
 
-    onQuery = (query) => {
+    private onQuery = (query: string) => {
         this.setState({ query });
     }
 
@@ -642,7 +701,10 @@ const PHASE_MAP = {
     [PHASE_CANCELLED]: "cancelled",
 };
 
-function VerificationRequest({txnId, request}) {
+const VerificationRequestExplorer: React.FC<{
+    txnId: string;
+    request: VerificationRequest;
+}> = ({txnId, request}) => {
     const [, updateState] = useState();
     const [timeout, setRequestTimeout] = useState(request.timeout);
 
@@ -679,7 +741,7 @@ function VerificationRequest({txnId, request}) {
     </div>);
 }
 
-class VerificationExplorer extends React.Component {
+class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     static getLabel() {
         return _t("Verification Requests");
     }
@@ -687,7 +749,7 @@ class VerificationExplorer extends React.Component {
     /* Ensure this.context is the cli */
     static contextType = MatrixClientContext;
 
-    onNewRequest = () => {
+    private onNewRequest = () => {
         this.forceUpdate();
     }
 
@@ -704,13 +766,13 @@ class VerificationExplorer extends React.Component {
     render() {
         const cli = this.context;
         const room = this.props.room;
-        const inRoomChannel = cli._crypto._inRoomVerificationRequests;
+        const inRoomChannel = cli.crypto.inRoomVerificationRequests;
         const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
 
         return (<div>
             <div className="mx_Dialog_content">
                 {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
-                    <VerificationRequest txnId={txnId} request={request} key={txnId} />,
+                    <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
                 )}
             </div>
             <div className="mx_Dialog_buttons">
@@ -720,7 +782,12 @@ class VerificationExplorer extends React.Component {
     }
 }
 
-class WidgetExplorer extends React.Component {
+interface IWidgetExplorerState {
+    query: string;
+    editWidget?: IApp;
+}
+
+class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerState> {
     static getLabel() {
         return _t("Active Widgets");
     }
@@ -734,19 +801,19 @@ class WidgetExplorer extends React.Component {
         };
     }
 
-    onWidgetStoreUpdate = () => {
+    private onWidgetStoreUpdate = () => {
         this.forceUpdate();
     };
 
-    onQueryChange = (query) => {
+    private onQueryChange = (query: string) => {
         this.setState({query});
     };
 
-    onEditWidget = (widget) => {
+    private onEditWidget = (widget: IApp) => {
         this.setState({editWidget: widget});
     };
 
-    onBack = () => {
+    private onBack = () => {
         const widgets = WidgetStore.instance.getApps(this.props.room.roomId);
         if (this.state.editWidget && widgets.includes(this.state.editWidget)) {
             this.setState({editWidget: null});
@@ -769,8 +836,11 @@ class WidgetExplorer extends React.Component {
         const editWidget = this.state.editWidget;
         const widgets = WidgetStore.instance.getApps(room.roomId);
         if (editWidget && widgets.includes(editWidget)) {
-            const allState = Array.from(Array.from(room.currentState.events.values()).map(e => e.values()))
-                .reduce((p, c) => {p.push(...c); return p;}, []);
+            const allState = Array.from(
+                Array.from(room.currentState.events.values()).map((e: Map<string, MatrixEvent>) => {
+                    return e.values();
+                }),
+            ).reduce((p, c) => { p.push(...c); return p; }, []);
             const stateEv = allState.find(ev => ev.getId() === editWidget.eventId);
             if (!stateEv) { // "should never happen"
                 return <div>
@@ -811,7 +881,15 @@ class WidgetExplorer extends React.Component {
     }
 }
 
-class SettingsExplorer extends React.Component {
+interface ISettingsExplorerState {
+    query: string;
+    editSetting?: string;
+    viewSetting?: string;
+    explicitValues?: string;
+    explicitRoomValues?: string;
+ }
+
+class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExplorerState> {
     static getLabel() {
         return _t("Settings Explorer");
     }
@@ -829,19 +907,19 @@ class SettingsExplorer extends React.Component {
         };
     }
 
-    onQueryChange = (ev) => {
+    private onQueryChange = (ev: ChangeEvent<HTMLInputElement>) => {
         this.setState({query: ev.target.value});
     };
 
-    onExplValuesEdit = (ev) => {
+    private onExplValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
         this.setState({explicitValues: ev.target.value});
     };
 
-    onExplRoomValuesEdit = (ev) => {
+    private onExplRoomValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
         this.setState({explicitRoomValues: ev.target.value});
     };
 
-    onBack = () => {
+    private onBack = () => {
         if (this.state.editSetting) {
             this.setState({editSetting: null});
         } else if (this.state.viewSetting) {
@@ -851,12 +929,12 @@ class SettingsExplorer extends React.Component {
         }
     };
 
-    onViewClick = (ev, settingId) => {
+    private onViewClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
         this.setState({viewSetting: settingId});
     };
 
-    onEditClick = (ev, settingId) => {
+    private onEditClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
         this.setState({
             editSetting: settingId,
@@ -865,7 +943,7 @@ class SettingsExplorer extends React.Component {
         });
     };
 
-    onSaveClick = async () => {
+    private onSaveClick = async () => {
         try {
             const settingId = this.state.editSetting;
             const parsedExplicit = JSON.parse(this.state.explicitValues);
@@ -874,7 +952,7 @@ class SettingsExplorer extends React.Component {
                 console.log(`[Devtools] Setting value of ${settingId} at ${level} from user input`);
                 try {
                     const val = parsedExplicit[level];
-                    await SettingsStore.setValue(settingId, null, level, val);
+                    await SettingsStore.setValue(settingId, null, level as SettingLevel, val);
                 } catch (e) {
                     console.warn(e);
                 }
@@ -884,7 +962,7 @@ class SettingsExplorer extends React.Component {
                 console.log(`[Devtools] Setting value of ${settingId} at ${level} in ${roomId} from user input`);
                 try {
                     const val = parsedExplicitRoom[level];
-                    await SettingsStore.setValue(settingId, roomId, level, val);
+                    await SettingsStore.setValue(settingId, roomId, level as SettingLevel, val);
                 } catch (e) {
                     console.warn(e);
                 }
@@ -901,7 +979,7 @@ class SettingsExplorer extends React.Component {
         }
     };
 
-    renderSettingValue(val) {
+    private renderSettingValue(val: any): string {
         // Note: we don't .toString() a string because we want JSON.stringify to inject quotes for us
         const toStringTypes = ['boolean', 'number'];
         if (toStringTypes.includes(typeof(val))) {
@@ -911,7 +989,7 @@ class SettingsExplorer extends React.Component {
         }
     }
 
-    renderExplicitSettingValues(setting, roomId) {
+    private renderExplicitSettingValues(setting: string, roomId: string): string {
         const vals = {};
         for (const level of LEVEL_ORDER) {
             try {
@@ -926,7 +1004,7 @@ class SettingsExplorer extends React.Component {
         return JSON.stringify(vals, null, 4);
     }
 
-    renderCanEditLevel(roomId, level) {
+    private renderCanEditLevel(roomId: string, level: SettingLevel): React.ReactNode {
         const canEdit = SettingsStore.canSetValue(this.state.editSetting, roomId, level);
         const className = canEdit ? 'mx_DevTools_SettingsExplorer_mutable' : 'mx_DevTools_SettingsExplorer_immutable';
         return <td className={className}><code>{canEdit.toString()}</code></td>;
@@ -1062,27 +1140,37 @@ class SettingsExplorer extends React.Component {
 
                         <div>
                             {_t("Value:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting),
+                            )}</code>
                         </div>
 
                         <div>
                             {_t("Value in this room:")}&nbsp;
-                            <code>{this.renderSettingValue(SettingsStore.getValue(this.state.viewSetting, room.roomId))}</code>
+                            <code>{this.renderSettingValue(
+                                SettingsStore.getValue(this.state.viewSetting, room.roomId),
+                            )}</code>
                         </div>
 
                         <div>
                             {_t("Values at explicit levels:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, null)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, null,
+                            )}</code></pre>
                         </div>
 
                         <div>
                             {_t("Values at explicit levels in this room:")}
-                            <pre><code>{this.renderExplicitSettingValues(this.state.viewSetting, room.roomId)}</code></pre>
+                            <pre><code>{this.renderExplicitSettingValues(
+                                this.state.viewSetting, room.roomId,
+                            )}</code></pre>
                         </div>
 
                     </div>
                     <div className="mx_Dialog_buttons">
-                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{_t("Edit Values")}</button>
+                        <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{
+                            _t("Edit Values")
+                        }</button>
                         <button onClick={this.onBack}>{_t("Back")}</button>
                     </div>
                 </div>
@@ -1091,7 +1179,11 @@ class SettingsExplorer extends React.Component {
     }
 }
 
-const Entries = [
+type DevtoolsDialogEntry = React.JSXElementConstructor<any> & {
+    getLabel: () => string;
+};
+
+const Entries: DevtoolsDialogEntry[] = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
@@ -1102,43 +1194,36 @@ const Entries = [
     SettingsExplorer,
 ];
 
-@replaceableComponent("views.dialogs.DevtoolsDialog")
-export default class DevtoolsDialog extends React.PureComponent {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    roomId: string;
+    onFinished: (finished: boolean) => void;
+}
 
+interface IState {
+    mode?: DevtoolsDialogEntry;
+}
+
+@replaceableComponent("views.dialogs.DevtoolsDialog")
+export default class DevtoolsDialog extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);
-        this.onBack = this.onBack.bind(this);
-        this.onCancel = this.onCancel.bind(this);
 
         this.state = {
             mode: null,
         };
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    _setMode(mode) {
+    private setMode(mode: DevtoolsDialogEntry) {
         return () => {
             this.setState({ mode });
         };
     }
 
-    onBack() {
-        if (this.prevMode) {
-            this.setState({ mode: this.prevMode });
-            this.prevMode = null;
-        } else {
-            this.setState({ mode: null });
-        }
+    private onBack = () => {
+        this.setState({ mode: null });
     }
 
-    onCancel() {
+    private onCancel = () => {
         this.props.onFinished(false);
     }
 
@@ -1165,7 +1250,7 @@ export default class DevtoolsDialog extends React.PureComponent {
                     <div className="mx_Dialog_content">
                         { Entries.map((Entry) => {
                             const label = Entry.getLabel();
-                            const onClick = this._setMode(Entry);
+                            const onClick = this.setMode(Entry);
                             return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
                         }) }
                     </div>

src/components/views/dialogs/ErrorDialog.tsx

@@ -26,37 +26,37 @@ limitations under the License.
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.dialogs.ErrorDialog")
-export default class ErrorDialog extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-        description: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.string,
-        ]),
-        button: PropTypes.string,
-        focus: PropTypes.bool,
-        onFinished: PropTypes.func.isRequired,
-        headerImage: PropTypes.string,
-    };
+interface IProps {
+    onFinished: (success: boolean) => void;
+    title?: string;
+    description?: React.ReactNode;
+    button?: string;
+    focus?: boolean;
+    headerImage?: string;
+}
 
-    static defaultProps = {
+interface IState {
+    onFinished: (success: boolean) => void;
+}
+
+@replaceableComponent("views.dialogs.ErrorDialog")
+export default class ErrorDialog extends React.Component<IProps, IState> {
+    public static defaultProps = {
         focus: true,
         title: null,
         description: null,
         button: null,
     };
 
-    onClick = () => {
+    private onClick = () => {
         this.props.onFinished(true);
     };
 
-    render() {
+    public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog

src/components/views/dialogs/ForwardDialog.tsx

@@ -0,0 +1,268 @@
+/*
+Copyright 2021 Robin Townsend <robin@robin.town>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useMemo, useState, useEffect } from "react";
+import classnames from "classnames";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
+import { _t } from "../../../languageHandler";
+import dis from "../../../dispatcher/dispatcher";
+import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings";
+import { UIFeature } from "../../../settings/UIFeature";
+import { Layout } from "../../../settings/Layout";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import { avatarUrlForUser } from "../../../Avatar";
+import EventTile from "../rooms/EventTile";
+import SearchBox from "../../structures/SearchBox";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import { Alignment } from '../elements/Tooltip';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import NotificationBadge from "../rooms/NotificationBadge";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import TruncatedList from "../elements/TruncatedList";
+import EntityTile from "../rooms/EntityTile";
+import BaseAvatar from "../avatars/BaseAvatar";
+
+const AVATAR_SIZE = 30;
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    // The event to forward
+    event: MatrixEvent;
+    // We need a permalink creator for the source room to pass through to EventTile
+    // in case the event is a reply (even though the user can't get at the link)
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IEntryProps {
+    room: Room;
+    event: MatrixEvent;
+    matrixClient: MatrixClient;
+    onFinished(success: boolean): void;
+}
+
+enum SendState {
+    CanSend,
+    Sending,
+    Sent,
+    Failed,
+}
+
+const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinished }) => {
+    const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
+
+    const jumpToRoom = () => {
+        dis.dispatch({
+            action: "view_room",
+            room_id: room.roomId,
+        });
+        onFinished(true);
+    };
+    const send = async () => {
+        setSendState(SendState.Sending);
+        try {
+            await cli.sendEvent(room.roomId, event.getType(), event.getContent());
+            setSendState(SendState.Sent);
+        } catch (e) {
+            setSendState(SendState.Failed);
+        }
+    };
+
+    let className;
+    let disabled = false;
+    let title;
+    let icon;
+    if (sendState === SendState.CanSend) {
+        className = "mx_ForwardList_canSend";
+        if (room.maySendMessage()) {
+            title = _t("Send");
+        } else {
+            disabled = true;
+            title = _t("You don't have permission to do this");
+        }
+    } else if (sendState === SendState.Sending) {
+        className = "mx_ForwardList_sending";
+        disabled = true;
+        title = _t("Sending");
+        icon = <div className="mx_ForwardList_sendIcon" aria-label={title}></div>;
+    } else if (sendState === SendState.Sent) {
+        className = "mx_ForwardList_sent";
+        disabled = true;
+        title = _t("Sent");
+        icon = <div className="mx_ForwardList_sendIcon" aria-label={title}></div>;
+    } else {
+        className = "mx_ForwardList_sendFailed";
+        disabled = true;
+        title = _t("Failed to send");
+        icon = <NotificationBadge
+            notification={StaticNotificationState.RED_EXCLAMATION}
+        />;
+    }
+
+    return <div className="mx_ForwardList_entry">
+        <AccessibleTooltipButton
+            className="mx_ForwardList_roomButton"
+            onClick={jumpToRoom}
+            title={_t("Open link")}
+            yOffset={-20}
+            alignment={Alignment.Top}
+        >
+            <DecoratedRoomAvatar room={room} avatarSize={32} />
+            <span className="mx_ForwardList_entry_name">{ room.name }</span>
+        </AccessibleTooltipButton>
+        <AccessibleTooltipButton
+            kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
+            className={`mx_ForwardList_sendButton ${className}`}
+            onClick={send}
+            disabled={disabled}
+            title={title}
+            yOffset={-20}
+            alignment={Alignment.Top}
+        >
+            <div className="mx_ForwardList_sendLabel">{ _t("Send") }</div>
+            { icon }
+        </AccessibleTooltipButton>
+    </div>;
+};
+
+const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCreator, onFinished }) => {
+    const userId = cli.getUserId();
+    const [profileInfo, setProfileInfo] = useState<any>({});
+    useEffect(() => {
+        cli.getProfileInfo(userId).then(info => setProfileInfo(info));
+    }, [cli, userId]);
+
+    // For the message preview we fake the sender as ourselves
+    const mockEvent = new MatrixEvent({
+        type: "m.room.message",
+        sender: userId,
+        content: event.getContent(),
+        unsigned: {
+            age: 97,
+        },
+        event_id: "$9999999999999999999999999999999999999999999",
+        room_id: event.getRoomId(),
+    });
+    mockEvent.sender = {
+        name: profileInfo.displayname || userId,
+        rawDisplayName: profileInfo.displayname,
+        userId,
+        getAvatarUrl: (..._) => {
+            return avatarUrlForUser(
+                { avatarUrl: profileInfo.avatar_url },
+                AVATAR_SIZE, AVATAR_SIZE, "crop",
+            );
+        },
+        getMxcAvatarUrl: () => profileInfo.avatar_url,
+    } as RoomMember;
+
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase();
+
+    const spacesEnabled = useFeatureEnabled("feature_spaces");
+    const flairEnabled = useFeatureEnabled(UIFeature.Flair);
+    const previewLayout = useSettingValue<Layout>("layout");
+
+    let rooms = useMemo(() => sortRooms(
+        cli.getVisibleRooms().filter(
+            room => room.getMyMembership() === "join" &&
+                !(spacesEnabled && room.isSpaceRoom()),
+        ),
+    ), [cli, spacesEnabled]);
+
+    if (lcQuery) {
+        rooms = new QueryMatcher<Room>(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        }).match(lcQuery);
+    }
+
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount, totalCount) {
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={() => setTruncateAt(totalCount)} />
+        );
+    }
+
+    return <BaseDialog
+        title={_t("Forward message")}
+        className="mx_ForwardDialog"
+        contentId="mx_ForwardList"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <h3>{ _t("Message preview") }</h3>
+        <div className={classnames("mx_ForwardDialog_preview", {
+            "mx_IRCLayout": previewLayout == Layout.IRC,
+            "mx_GroupLayout": previewLayout == Layout.Group,
+        })}>
+            <EventTile
+                mxEvent={mockEvent}
+                layout={previewLayout}
+                enableFlair={flairEnabled}
+                permalinkCreator={permalinkCreator}
+                as="div"
+            />
+        </div>
+        <hr />
+        <div className="mx_ForwardList" id="mx_ForwardList">
+            <SearchBox
+                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">
+                { rooms.length > 0 ? (
+                    <div className="mx_ForwardList_results">
+                        <TruncatedList
+                            truncateAt={truncateAt}
+                            createOverflowElement={overflowTile}
+                            getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                                <Entry
+                                    key={room.roomId}
+                                    room={room}
+                                    event={event}
+                                    matrixClient={cli}
+                                    onFinished={onFinished}
+                                />,
+                            )}
+                            getChildCount={() => rooms.length}
+                        />
+                    </div>
+                ) : <span className="mx_ForwardList_noResults">
+                    { _t("No results") }
+                </span> }
+            </AutoHideScrollbar>
+        </div>
+    </BaseDialog>;
+};
+
+export default ForwardDialog;

src/components/views/dialogs/IDialogProps.ts

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 export interface IDialogProps {
-    onFinished: (bool) => void;
+    onFinished(...args: any): void;
 }

src/components/views/dialogs/InviteDialog.tsx

@@ -14,43 +14,67 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import {_t, _td} from "../../../languageHandler";
+import React, { createRef } from 'react';
+import classNames from 'classnames';
+
+import { _t, _td } from "../../../languageHandler";
 import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import SdkConfig from "../../../SdkConfig";
 import * as Email from "../../../email";
-import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
-import {abbreviateUrl} from "../../../utils/UrlUtils";
+import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from "../../../utils/IdentityServerUtils";
+import { abbreviateUrl } from "../../../utils/UrlUtils";
 import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
-import {humanizeTime} from "../../../utils/humanize";
+import { humanizeTime } from "../../../utils/humanize";
 import createRoom, {
-    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
-    IInvite3PID,
+    canEncryptToAllUsers,
+    ensureDMExists,
+    findDMForUser,
+    privateShouldBeEncrypted,
 } from "../../../createRoom";
-import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
-import {Key} from "../../../Keyboard";
-import {Action} from "../../../dispatcher/actions";
-import {DefaultTagID} from "../../../stores/room-list/models";
+import {
+    IInviteResult,
+    inviteMultipleToRoom,
+    showAnyInviteErrors,
+    showCommunityInviteDialog,
+} from "../../../RoomInvite";
+import { Key } from "../../../Keyboard";
+import { Action } from "../../../dispatcher/actions";
+import { DefaultTagID } from "../../../stores/room-list/models";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {getAddressType} from "../../../UserAddress";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { getAddressType } from "../../../UserAddress";
+import BaseAvatar from '../avatars/BaseAvatar';
+import AccessibleButton from '../elements/AccessibleButton';
+import { compare } from '../../../utils/strings';
+import { IInvite3PID } from "matrix-js-sdk/src/@types/requests";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { copyPlaintext, selectText } from "../../../utils/strings";
+import * as ContextMenu from "../../structures/ContextMenu";
+import { toRightOf } from "../../structures/ContextMenu";
+import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
+interface IRecentUser {
+    userId: string,
+    user: RoomMember,
+    lastActive: number,
+}
+
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
 export const KIND_CALL_TRANSFER = "call_transfer";
@@ -58,46 +82,45 @@ export const KIND_CALL_TRANSFER = "call_transfer";
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
-// This is the interface that is expected by various components in this file. It is a bit
-// awkward because it also matches the RoomMember class from the js-sdk with some extra support
+// This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
+// It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
 // for 3PIDs/email addresses.
-//
-// XXX: We should use TypeScript interfaces instead of this weird "abstract" class.
-class Member {
+export abstract class Member {
     /**
      * The display name of this Member. For users this should be their profile's display
      * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
      */
-    get name(): string { throw new Error("Member class not implemented"); }
+    public abstract get name(): string;
 
     /**
      * The ID of this Member. For users this should be their user ID. For 3PIDs this should
      * be the 3PID address (email).
      */
-    get userId(): string { throw new Error("Member class not implemented"); }
+    public abstract get userId(): string;
 
     /**
      * Gets the MXC URL of this Member's avatar. For users this should be their profile's
      * avatar MXC URL or null if none set. For 3PIDs this should always be null.
      */
-    getMxcAvatarUrl(): string { throw new Error("Member class not implemented"); }
+    public abstract getMxcAvatarUrl(): string;
 }
 
 class DirectoryMember extends Member {
-    _userId: string;
-    _displayName: string;
-    _avatarUrl: string;
+    private readonly _userId: string;
+    private readonly displayName: string;
+    private readonly avatarUrl: string;
 
-    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
+    // eslint-disable-next-line camelcase
+    constructor(userDirResult: { user_id: string, display_name: string, avatar_url: string }) {
         super();
         this._userId = userDirResult.user_id;
-        this._displayName = userDirResult.display_name;
-        this._avatarUrl = userDirResult.avatar_url;
+        this.displayName = userDirResult.display_name;
+        this.avatarUrl = userDirResult.avatar_url;
     }
 
     // These next class members are for the Member interface
     get name(): string {
-        return this._displayName || this._userId;
+        return this.displayName || this._userId;
     }
 
     get userId(): string {
@@ -105,32 +128,32 @@ class DirectoryMember extends Member {
     }
 
     getMxcAvatarUrl(): string {
-        return this._avatarUrl;
+        return this.avatarUrl;
     }
 }
 
 class ThreepidMember extends Member {
-    _id: string;
+    private readonly id: string;
 
     constructor(id: string) {
         super();
-        this._id = id;
+        this.id = id;
     }
 
     // This is a getter that would be falsey on all other implementations. Until we have
     // better type support in the react-sdk we can use this trick to determine the kind
     // of 3PID we're dealing with, if any.
     get isEmail(): boolean {
-        return this._id.includes('@');
+        return this.id.includes('@');
     }
 
     // These next class members are for the Member interface
     get name(): string {
-        return this._id;
+        return this.id;
     }
 
     get userId(): string {
-        return this._id;
+        return this.id;
     }
 
     getMxcAvatarUrl(): string {
@@ -139,12 +162,12 @@ class ThreepidMember extends Member {
 }
 
 interface IDMUserTileProps {
-    member: RoomMember;
-    onRemove: (RoomMember) => any;
+    member: Member;
+    onRemove(member: Member): void;
 }
 
 class DMUserTile extends React.PureComponent<IDMUserTileProps> {
-    _onRemove = (e) => {
+    private onRemove = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -153,11 +176,8 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
     };
 
     render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
         const avatarSize = 20;
-        const avatar = this.props.member.isEmail
+        const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
                 className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
                 src={require("../../../../res/img/icon-email-pill-avatar.svg")}
@@ -177,7 +197,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
             closeButton = (
                 <AccessibleButton
                     className='mx_InviteDialog_userTile_remove'
-                    onClick={this._onRemove}
+                    onClick={this.onRemove}
                 >
                     <img src={require("../../../../res/img/icon-pill-remove.svg")}
                         alt={_t('Remove')} width={8} height={8}
@@ -199,15 +219,15 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
 }
 
 interface IDMRoomTileProps {
-    member: RoomMember;
+    member: Member;
     lastActiveTs: number;
-    onToggle: (RoomMember) => any;
+    onToggle(member: Member): void;
     highlightWord: string;
     isSelected: boolean;
 }
 
 class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
-    _onClick = (e) => {
+    private onClick = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -215,7 +235,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         this.props.onToggle(this.props.member);
     };
 
-    _highlightName(str: string) {
+    private highlightName(str: string) {
         if (!this.props.highlightWord) return str;
 
         // We convert things to lowercase for index searching, but pull substrings from
@@ -252,8 +272,6 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
     }
 
     render() {
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
@@ -261,7 +279,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         }
 
         const avatarSize = 36;
-        const avatar = this.props.member.isEmail
+        const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
                 src={require("../../../../res/img/icon-email-pill-avatar.svg")}
                 width={avatarSize} height={avatarSize} />
@@ -289,15 +307,15 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
             </span>
         );
 
-        const caption = this.props.member.isEmail
+        const caption = (this.props.member as ThreepidMember).isEmail
             ? _t("Invite by email")
-            : this._highlightName(this.props.member.userId);
+            : this.highlightName(this.props.member.userId);
 
         return (
-            <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
+            <div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
                 {stackedAvatar}
                 <span className="mx_InviteDialog_roomTile_nameStack">
-                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_name'>{this.highlightName(this.props.member.name)}</div>
                     <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
                 </span>
                 {timestamp}
@@ -308,7 +326,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
 interface IInviteDialogProps {
     // Takes an array of user IDs/emails to invite.
-    onFinished: (toInvite?: string[]) => any;
+    onFinished: (toInvite?: string[]) => void;
 
     // The kind of invite being performed. Assumed to be KIND_DM if
     // not provided.
@@ -325,7 +343,7 @@ interface IInviteDialogProps {
 }
 
 interface IInviteDialogState {
-    targets: RoomMember[]; // array of Member objects (see interface above)
+    targets: Member[]; // array of Member objects (see interface above)
     filterText: string;
     recents: { user: Member, userId: string }[];
     numRecentsShown: number;
@@ -349,8 +367,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         initialText: "",
     };
 
-    _debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
-    _editorRef: any = null;
+    private closeCopiedTooltip: () => void;
+    private debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
+    private editorRef = createRef<HTMLInputElement>();
+    private unmounted = false;
 
     constructor(props) {
         super(props);
@@ -378,7 +398,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             filterText: this.props.initialText,
             recents: InviteDialog.buildRecents(alreadyInvited),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
-            suggestions: this._buildSuggestions(alreadyInvited),
+            suggestions: this.buildSuggestions(alreadyInvited),
             numSuggestionsShown: INITIAL_ROOMS_SHOWN,
             serverResultsMixin: [],
             threepidResultsMixin: [],
@@ -390,21 +410,26 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             busy: false,
             errorText: null,
         };
-
-        this._editorRef = createRef();
     }
 
     componentDidMount() {
         if (this.props.initialText) {
-            this._updateSuggestions(this.props.initialText);
+            this.updateSuggestions(this.props.initialText);
         }
     }
 
+    componentWillUnmount() {
+        this.unmounted = true;
+        // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+        // the tooltip otherwise, such as pressing Escape or clicking X really quickly
+        if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+    }
+
     private onConsultFirstChange = (ev) => {
         this.setState({consultFirst: ev.target.checked});
     }
 
-    static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number}[] {
+    public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
@@ -467,7 +492,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return recents;
     }
 
-    _buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
+    private buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember}[] {
         const maxConsideredMembers = 200;
         const joinedRooms = MatrixClientPeg.get().getRooms()
             .filter(r => r.getMyMembership() === 'join' && r.getJoinedMemberCount() <= maxConsideredMembers);
@@ -574,7 +599,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         members.sort((a, b) => {
             if (a.score === b.score) {
                 if (a.numRooms === b.numRooms) {
-                    return a.member.userId.localeCompare(b.member.userId);
+                    return compare(a.member.userId, b.member.userId);
                 }
 
                 return b.numRooms - a.numRooms;
@@ -585,22 +610,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return members.map(m => ({userId: m.member.userId, user: m.member}));
     }
 
-    _shouldAbortAfterInviteError(result): boolean {
-        const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
-        if (failedUsers.length > 0) {
-            console.log("Failed to invite users: ", result);
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to invite the following users to chat: %(csvUsers)s", {
-                    csvUsers: failedUsers.join(", "),
-                }),
-            });
-            return true; // abort
-        }
-        return false;
+    private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
+        this.setState({ busy: false });
+        const userMap = new Map<string, Member>(this.state.targets.map(member => [member.userId, member]));
+        return !showAnyInviteErrors(result.states, room, result.inviter, userMap);
     }
 
-    _convertFilter(): Member[] {
+    private convertFilter(): Member[] {
         // Check to see if there's anything to convert first
         if (!this.state.filterText || !this.state.filterText.includes('@')) return this.state.targets || [];
 
@@ -617,10 +633,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return newTargets;
     }
 
-    _startDm = async () => {
+    private startDm = async () => {
         this.setState({busy: true});
         const client = MatrixClientPeg.get();
-        const targets = this._convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
@@ -694,11 +710,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _inviteUsers = async () => {
+    private inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
         this.setState({busy: true});
-        this._convertFilter();
-        const targets = this._convertFilter();
+        this.convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
 
         const cli = MatrixClientPeg.get();
@@ -715,7 +731,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         try {
             const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
-            if (!this._shouldAbortAfterInviteError(result)) { // handles setting error message too
+            if (!this.shouldAbortAfterInviteError(result, room)) { // handles setting error message too
                 this.props.onFinished();
             }
 
@@ -749,9 +765,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _transferCall = async () => {
-        this._convertFilter();
-        const targets = this._convertFilter();
+    private transferCall = async () => {
+        this.convertFilter();
+        const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
         if (targetIds.length > 1) {
             this.setState({
@@ -790,26 +806,26 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _onKeyDown = (e) => {
+    private onKeyDown = (e) => {
         if (this.state.busy) return;
         const value = e.target.value.trim();
         const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
         if (!value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
             // when the field is empty and the user hits backspace remove the right-most target
             e.preventDefault();
-            this._removeMember(this.state.targets[this.state.targets.length - 1]);
+            this.removeMember(this.state.targets[this.state.targets.length - 1]);
         } else if (value && e.key === Key.ENTER && !hasModifiers) {
             // when the user hits enter with something in their field try to convert it
             e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
         } else if (value && e.key === Key.SPACE && !hasModifiers && value.includes("@") && !value.includes(" ")) {
             // when the user hits space and their input looks like an e-mail/MXID then try to convert it
             e.preventDefault();
-            this._convertFilter();
+            this.convertFilter();
         }
     };
 
-    _updateSuggestions = async (term) => {
+    private updateSuggestions = async (term) => {
         MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
             if (term !== this.state.filterText) {
                 // Discard the results - we were probably too slow on the server-side to make
@@ -918,30 +934,30 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
-    _updateFilter = (e) => {
+    private updateFilter = (e) => {
         const term = e.target.value;
         this.setState({filterText: term});
 
         // Debounce server lookups to reduce spam. We don't clear the existing server
         // results because they might still be vaguely accurate, likewise for races which
         // could happen here.
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
         }
-        this._debounceTimer = setTimeout(() => {
-            this._updateSuggestions(term);
+        this.debounceTimer = setTimeout(() => {
+            this.updateSuggestions(term);
         }, 150); // 150ms debounce (human reaction time + some)
     };
 
-    _showMoreRecents = () => {
+    private showMoreRecents = () => {
         this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
     };
 
-    _showMoreSuggestions = () => {
+    private showMoreSuggestions = () => {
         this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
     };
 
-    _toggleMember = (member: Member) => {
+    private toggleMember = (member: Member) => {
         if (!this.state.busy) {
             let filterText = this.state.filterText;
             const targets = this.state.targets.map(t => t); // cheap clone for mutation
@@ -954,13 +970,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             }
             this.setState({targets, filterText});
 
-            if (this._editorRef && this._editorRef.current) {
-                this._editorRef.current.focus();
+            if (this.editorRef && this.editorRef.current) {
+                this.editorRef.current.focus();
             }
         }
     };
 
-    _removeMember = (member: Member) => {
+    private removeMember = (member: Member) => {
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(member);
         if (idx >= 0) {
@@ -968,12 +984,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             this.setState({targets});
         }
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
         }
     };
 
-    _onPaste = async (e) => {
+    private onPaste = async (e) => {
         if (this.state.filterText) {
             // if the user has already typed something, just let them
             // paste normally.
@@ -1027,6 +1043,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 failed.push(address);
             }
         }
+        if (this.unmounted) return;
 
         if (failed.length > 0) {
             const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
@@ -1043,17 +1060,17 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         this.setState({targets: [...this.state.targets, ...toAdd]});
     };
 
-    _onClickInputArea = (e) => {
+    private onClickInputArea = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
 
-        if (this._editorRef && this._editorRef.current) {
-            this._editorRef.current.focus();
+        if (this.editorRef && this.editorRef.current) {
+            this.editorRef.current.focus();
         }
     };
 
-    _onUseDefaultIdentityServerClick = (e) => {
+    private onUseDefaultIdentityServerClick = (e) => {
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
@@ -1062,21 +1079,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         this.setState({canUseIdentityServer: true, tryingIdentityServer: false});
     };
 
-    _onManageSettingsClick = (e) => {
+    private onManageSettingsClick = (e) => {
         e.preventDefault();
         dis.fire(Action.ViewUserSettings);
         this.props.onFinished();
     };
 
-    _onCommunityInviteClick = (e) => {
+    private onCommunityInviteClick = (e) => {
         this.props.onFinished();
         showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
     };
 
-    _renderSection(kind: "recents"|"suggestions") {
+    private renderSection(kind: "recents"|"suggestions") {
         let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions;
         let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown;
-        const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this);
+        const showMoreFn = kind === 'recents' ? this.showMoreRecents.bind(this) : this.showMoreSuggestions.bind(this);
         const lastActive = (m) => kind === 'recents' ? m.lastActive : null;
         let sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
         let sectionSubname = null;
@@ -1156,7 +1173,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 member={r.user}
                 lastActiveTs={lastActive(r)}
                 key={r.userId}
-                onToggle={this._toggleMember}
+                onToggle={this.toggleMember}
                 highlightWord={this.state.filterText}
                 isSelected={this.state.targets.some(t => t.userId === r.userId)}
             />
@@ -1171,32 +1188,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         );
     }
 
-    _renderEditor() {
+    private renderEditor() {
         const targets = this.state.targets.map(t => (
-            <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
+            <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
         ));
         const input = (
             <input
                 type="text"
-                onKeyDown={this._onKeyDown}
-                onChange={this._updateFilter}
+                onKeyDown={this.onKeyDown}
+                onChange={this.updateFilter}
                 value={this.state.filterText}
-                ref={this._editorRef}
-                onPaste={this._onPaste}
+                ref={this.editorRef}
+                onPaste={this.onPaste}
                 autoFocus={true}
                 disabled={this.state.busy}
                 autoComplete="off"
             />
         );
         return (
-            <div className='mx_InviteDialog_editor' onClick={this._onClickInputArea}>
+            <div className='mx_InviteDialog_editor' onClick={this.onClickInputArea}>
                 {targets}
                 {input}
             </div>
         );
     }
 
-    _renderIdentityServerWarning() {
+    private renderIdentityServerWarning() {
         if (!this.state.tryingIdentityServer || this.state.canUseIdentityServer ||
             !SettingsStore.getValue(UIFeature.IdentityServer)
         ) {
@@ -1214,8 +1231,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                     },
                     {
-                        default: sub => <a href="#" onClick={this._onUseDefaultIdentityServerClick}>{sub}</a>,
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                     },
                 )}</div>
             );
@@ -1225,13 +1242,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     "Use an identity server to invite by email. " +
                     "Manage in <settings>Settings</settings>.",
                     {}, {
-                        settings: sub => <a href="#" onClick={this._onManageSettingsClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
                     },
                 )}</div>
             );
         }
     }
 
+    private async onLinkClick(e) {
+        e.preventDefault();
+        selectText(e.target);
+    }
+
+    private onCopyClick = async e => {
+        e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
+
+        const successful = await copyPlaintext(makeUserPermalink(MatrixClientPeg.get().getUserId()));
+        const buttonRect = target.getBoundingClientRect();
+        const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t("Copied!") : _t("Failed to copy"),
+        });
+        // Drop a reference to this close handler for componentWillUnmount
+        this.closeCopiedTooltip = target.onmouseleave = close;
+    };
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -1242,12 +1278,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             spinner = <Spinner w={20} h={20} />;
         }
 
-
         let title;
         let helpText;
         let buttonText;
         let goButtonFn;
-        let consultSection;
+        let extraSection;
+        let footer;
         let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
@@ -1298,7 +1334,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             return (
                                 <AccessibleButton
                                     kind="link"
-                                    onClick={this._onCommunityInviteClick}
+                                    onClick={this.onCommunityInviteClick}
                                 >{sub}</AccessibleButton>
                             );
                         },
@@ -1309,7 +1345,27 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 </React.Fragment>;
             }
             buttonText = _t("Go");
-            goButtonFn = this._startDm;
+            goButtonFn = this.startDm;
+            extraSection = <div className="mx_InviteDialog_section_hidden_suggestions_disclaimer">
+                <span>{ _t("Some suggestions may be hidden for privacy.") }</span>
+                <p>{ _t("If you can't see who you’re looking for, send them your invite link below.") }</p>
+            </div>;
+            const link = makeUserPermalink(MatrixClientPeg.get().getUserId());
+            footer = <div className="mx_InviteDialog_footer">
+                <h3>{ _t("Or send invite link") }</h3>
+                <div className="mx_InviteDialog_footer_link">
+                    <a href={link} onClick={this.onLinkClick}>
+                        { link }
+                    </a>
+                    <AccessibleTooltipButton
+                        title={_t("Copy")}
+                        onClick={this.onCopyClick}
+                        className="mx_InviteDialog_footer_link_copy"
+                    >
+                        <div />
+                    </AccessibleTooltipButton>
+                </div>
+            </div>
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
             const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
@@ -1348,7 +1404,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
 
             buttonText = _t("Invite");
-            goButtonFn = this._inviteUsers;
+            goButtonFn = this.inviteUsers;
 
             if (cli.isRoomEncrypted(this.props.roomId)) {
                 const room = cli.getRoom(this.props.roomId);
@@ -1370,8 +1426,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
             buttonText = _t("Transfer");
-            goButtonFn = this._transferCall;
-            consultSection = <div>
+            goButtonFn = this.transferCall;
+            footer = <div>
                 <label>
                     <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
                     {_t("Consult first")}
@@ -1385,7 +1441,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             || (this.state.filterText && this.state.filterText.includes('@'));
         return (
             <BaseDialog
-                className='mx_InviteDialog'
+                className={classNames("mx_InviteDialog", {
+                    mx_InviteDialog_hasFooter: !!footer,
+                })}
                 hasCancel={true}
                 onFinished={this.props.onFinished}
                 title={title}
@@ -1393,7 +1451,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 <div className='mx_InviteDialog_content'>
                     <p className='mx_InviteDialog_helpText'>{helpText}</p>
                     <div className='mx_InviteDialog_addressBar'>
-                        {this._renderEditor()}
+                        {this.renderEditor()}
                         <div className='mx_InviteDialog_buttonAndSpinner'>
                             <AccessibleButton
                                 kind="primary"
@@ -1407,13 +1465,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         </div>
                     </div>
                     {keySharingWarning}
-                    {this._renderIdentityServerWarning()}
+                    {this.renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
                     <div className='mx_InviteDialog_userSections'>
-                        {this._renderSection('recents')}
-                        {this._renderSection('suggestions')}
+                        {this.renderSection('recents')}
+                        {this.renderSection('suggestions')}
+                        {extraSection}
                     </div>
-                    {consultSection}
+                    {footer}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -159,7 +159,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
                 stickyBottom={false}
                 startAtBottom={false}
             >
-                <ul className="mx_MessageEditHistoryDialog_edits mx_MessagePanel_alwaysShowTimestamps">{this._renderEdits()}</ul>
+                <ul className="mx_MessageEditHistoryDialog_edits">{this._renderEdits()}</ul>
             </ScrollPanel>);
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/dialogs/ModalWidgetDialog.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.
@@ -16,7 +16,7 @@ limitations under the License.
 
 import * as React from 'react';
 import BaseDialog from './BaseDialog';
-import { _t } from '../../../languageHandler';
+import { _t, getUserLanguage } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import {
     ClientWidgetApi,
@@ -39,6 +39,8 @@ import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ELEMENT_CLIENT_ID} from "../../../identifiers";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
@@ -61,7 +63,8 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
 
     state: IState = {
-        disabledButtonIds: [],
+        disabledButtonIds: (this.props.widgetDefinition.buttons || []).filter(b => b.disabled)
+            .map(b => b.id),
     };
 
     constructor(props) {
@@ -129,6 +132,9 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             currentUserId: MatrixClientPeg.get().getUserId(),
             userDisplayName: OwnProfileStore.instance.displayName,
             userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
+            clientId: ELEMENT_CLIENT_ID,
+            clientTheme: SettingsStore.getValue("theme"),
+            clientLanguage: getUserLanguage(),
         });
 
         const parsed = new URL(templated);

src/components/views/dialogs/ReportEventDialog.js

@@ -1,149 +0,0 @@
-/*
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {PureComponent} from 'react';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import PropTypes from "prop-types";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import SdkConfig from '../../../SdkConfig';
-import Markdown from '../../../Markdown';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-/*
- * A dialog for reporting an event.
- */
-@replaceableComponent("views.dialogs.ReportEventDialog")
-export default class ReportEventDialog extends PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            reason: "",
-            busy: false,
-            err: null,
-        };
-    }
-
-    _onReasonChange = ({target: {value: reason}}) => {
-        this.setState({ reason });
-    };
-
-    _onCancel = () => {
-        this.props.onFinished(false);
-    };
-
-    _onSubmit = async () => {
-        if (!this.state.reason || !this.state.reason.trim()) {
-            this.setState({
-                err: _t("Please fill why you're reporting."),
-            });
-            return;
-        }
-
-        this.setState({
-            busy: true,
-            err: null,
-        });
-
-        try {
-            const ev = this.props.mxEvent;
-            await MatrixClientPeg.get().reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim());
-            this.props.onFinished(true);
-        } catch (e) {
-            this.setState({
-                busy: false,
-                err: e.message,
-            });
-        }
-    };
-
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Loader = sdk.getComponent('elements.Spinner');
-        const Field = sdk.getComponent('elements.Field');
-
-        let error = null;
-        if (this.state.err) {
-            error = <div className="error">
-                {this.state.err}
-            </div>;
-        }
-
-        let progress = null;
-        if (this.state.busy) {
-            progress = (
-                <div className="progress">
-                    <Loader />
-                </div>
-            );
-        }
-
-        const adminMessageMD =
-            SdkConfig.get().reportEvent &&
-            SdkConfig.get().reportEvent.adminMessageMD;
-        let adminMessage;
-        if (adminMessageMD) {
-            const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true });
-            adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
-        }
-
-        return (
-            <BaseDialog
-                className="mx_BugReportDialog"
-                onFinished={this.props.onFinished}
-                title={_t('Report Content to Your Homeserver Administrator')}
-                contentId='mx_ReportEventDialog'
-            >
-                <div className="mx_ReportEventDialog" id="mx_ReportEventDialog">
-                    <p>
-                        {
-                            _t("Reporting this message will send its unique 'event ID' to the administrator of " +
-                                "your homeserver. If messages in this room are encrypted, your homeserver " +
-                                "administrator will not be able to read the message text or view any files or images.")
-                        }
-                    </p>
-                    {adminMessage}
-                    <Field
-                        className="mx_ReportEventDialog_reason"
-                        element="textarea"
-                        label={_t("Reason")}
-                        rows={5}
-                        onChange={this._onReasonChange}
-                        value={this.state.reason}
-                        disabled={this.state.busy}
-                    />
-                    {progress}
-                    {error}
-                </div>
-                <DialogButtons
-                    primaryButton={_t("Send report")}
-                    onPrimaryButtonClick={this._onSubmit}
-                    focus={true}
-                    onCancel={this._onCancel}
-                    disabled={this.state.busy}
-                />
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/ReportEventDialog.tsx

@@ -0,0 +1,445 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import * as sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { ensureDMExists } from "../../../createRoom";
+import { IDialogProps } from "./IDialogProps";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import SdkConfig from '../../../SdkConfig';
+import Markdown from '../../../Markdown';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
+import StyledRadioButton from "../elements/StyledRadioButton";
+
+interface IProps extends IDialogProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    // A free-form text describing the abuse.
+    reason: string;
+    busy: boolean;
+    err?: string;
+    // If we know it, the nature of the abuse, as specified by MSC3215.
+    nature?: EXTENDED_NATURE;
+}
+
+
+const MODERATED_BY_STATE_EVENT_TYPE = [
+    "org.matrix.msc3215.room.moderation.moderated_by",
+    /**
+     * Unprefixed state event. Not ready for prime time.
+     *
+     * "m.room.moderation.moderated_by"
+     */
+];
+
+const ABUSE_EVENT_TYPE = "org.matrix.msc3215.abuse.report";
+
+// Standard abuse natures.
+enum NATURE {
+    DISAGREEMENT = "org.matrix.msc3215.abuse.nature.disagreement",
+    TOXIC = "org.matrix.msc3215.abuse.nature.toxic",
+    ILLEGAL = "org.matrix.msc3215.abuse.nature.illegal",
+    SPAM = "org.matrix.msc3215.abuse.nature.spam",
+    OTHER = "org.matrix.msc3215.abuse.nature.other",
+}
+
+enum NON_STANDARD_NATURE {
+    // Non-standard abuse nature.
+    // It should never leave the client - we use it to fallback to
+    // server-wide abuse reporting.
+    ADMIN = "non-standard.abuse.nature.admin"
+}
+
+type EXTENDED_NATURE = NATURE | NON_STANDARD_NATURE;
+
+type Moderation = {
+    // The id of the moderation room.
+    moderationRoomId: string;
+    // The id of the bot in charge of forwarding abuse reports to the moderation room.
+    moderationBotUserId: string;
+}
+/*
+ * A dialog for reporting an event.
+ *
+ * The actual content of the dialog will depend on two things:
+ *
+ * 1. Is `feature_report_to_moderators` enabled?
+ * 2. Does the room support moderation as per MSC3215, i.e. is there
+ *    a well-formed state event `m.room.moderation.moderated_by`
+ *    /`org.matrix.msc3215.room.moderation.moderated_by`?
+ */
+@replaceableComponent("views.dialogs.ReportEventDialog")
+export default class ReportEventDialog extends React.Component<IProps, IState> {
+    // If the room supports moderation, the moderation information.
+    private moderation?: Moderation;
+
+    constructor(props: IProps) {
+        super(props);
+
+        let moderatedByRoomId = null;
+        let moderatedByUserId = null;
+
+        if (SettingsStore.getValue("feature_report_to_moderators")) {
+            // The client supports reporting to moderators.
+            // Does the room support it, too?
+
+            // Extract state events to determine whether we should display
+            const client = MatrixClientPeg.get();
+            const room = client.getRoom(props.mxEvent.getRoomId());
+
+            for (const stateEventType of MODERATED_BY_STATE_EVENT_TYPE) {
+                const stateEvent = room.currentState.getStateEvents(stateEventType, stateEventType);
+                if (!stateEvent) {
+                    continue;
+                }
+                if (Array.isArray(stateEvent)) {
+                    // Internal error.
+                    throw new TypeError(`getStateEvents(${stateEventType}, ${stateEventType}) ` +
+                        "should return at most one state event");
+                }
+                const event = stateEvent.event;
+                if (!("content" in event) || typeof event["content"] != "object") {
+                    // The room is improperly configured.
+                    // Display this debug message for the sake of moderators.
+                    console.debug("Moderation error", "state event", stateEventType,
+                        "should have an object field `content`, got", event);
+                    continue;
+                }
+                const content = event["content"];
+                if (!("room_id" in content) || typeof content["room_id"] != "string") {
+                    // The room is improperly configured.
+                    // Display this debug message for the sake of moderators.
+                    console.debug("Moderation error", "state event", stateEventType,
+                        "should have a string field `content.room_id`, got", event);
+                    continue;
+                }
+                if (!("user_id" in content) || typeof content["user_id"] != "string") {
+                    // The room is improperly configured.
+                    // Display this debug message for the sake of moderators.
+                    console.debug("Moderation error", "state event", stateEventType,
+                        "should have a string field `content.user_id`, got", event);
+                    continue;
+                }
+                moderatedByRoomId = content["room_id"];
+                moderatedByUserId = content["user_id"];
+            }
+
+            if (moderatedByRoomId && moderatedByUserId) {
+                // The room supports moderation.
+                this.moderation = {
+                    moderationRoomId: moderatedByRoomId,
+                    moderationBotUserId: moderatedByUserId,
+                };
+            }
+        }
+
+        this.state = {
+            // A free-form text describing the abuse.
+            reason: "",
+            busy: false,
+            err: null,
+            // If specified, the nature of the abuse, as specified by MSC3215.
+            nature: null,
+        };
+    }
+
+    // The user has written down a freeform description of the abuse.
+    private onReasonChange = ({target: {value: reason}}): void => {
+        this.setState({ reason });
+    };
+
+    // The user has clicked on a nature.
+    private onNatureChosen = (e: React.FormEvent<HTMLInputElement>): void => {
+        this.setState({ nature: e.currentTarget.value as EXTENDED_NATURE});
+    };
+
+    // The user has clicked "cancel".
+    private onCancel = (): void => {
+        this.props.onFinished(false);
+    };
+
+    // The user has clicked "submit".
+    private onSubmit = async () => {
+        let reason = this.state.reason || "";
+        reason = reason.trim();
+        if (this.moderation) {
+            // This room supports moderation.
+            // We need a nature.
+            // If the nature is `NATURE.OTHER` or `NON_STANDARD_NATURE.ADMIN`, we also need a `reason`.
+            if (!this.state.nature ||
+                    ((this.state.nature == NATURE.OTHER || this.state.nature == NON_STANDARD_NATURE.ADMIN)
+                        && !reason)
+            ) {
+                this.setState({
+                    err: _t("Please fill why you're reporting."),
+                });
+                return;
+            }
+        } else {
+            // This room does not support moderation.
+            // We need a `reason`.
+            if (!reason) {
+                this.setState({
+                    err: _t("Please fill why you're reporting."),
+                });
+                return;
+            }
+        }
+
+        this.setState({
+            busy: true,
+            err: null,
+        });
+
+        try {
+            const client = MatrixClientPeg.get();
+            const ev = this.props.mxEvent;
+            if (this.moderation && this.state.nature != NON_STANDARD_NATURE.ADMIN) {
+                const nature: NATURE = this.state.nature;
+
+                // Report to moderators through to the dedicated bot,
+                // as configured in the room's state events.
+                const dmRoomId = await ensureDMExists(client, this.moderation.moderationBotUserId);
+                await client.sendEvent(dmRoomId, ABUSE_EVENT_TYPE, {
+                    event_id: ev.getId(),
+                    room_id: ev.getRoomId(),
+                    moderated_by_id: this.moderation.moderationRoomId,
+                    nature,
+                    reporter: client.getUserId(),
+                    comment: this.state.reason.trim(),
+                });
+            } else {
+                // Report to homeserver admin through the dedicated Matrix API.
+                await client.reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim());
+            }
+            this.props.onFinished(true);
+        } catch (e) {
+            this.setState({
+                busy: false,
+                err: e.message,
+            });
+        }
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Loader = sdk.getComponent('elements.Spinner');
+        const Field = sdk.getComponent('elements.Field');
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    <Loader />
+                </div>
+            );
+        }
+
+        const adminMessageMD =
+            SdkConfig.get().reportEvent &&
+            SdkConfig.get().reportEvent.adminMessageMD;
+        let adminMessage;
+        if (adminMessageMD) {
+            const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true });
+            adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
+        }
+
+        if (this.moderation) {
+            // Display report-to-moderator dialog.
+            // We let the user pick a nature.
+            const client = MatrixClientPeg.get();
+            const homeServerName = SdkConfig.get()["validated_server_config"].hsName;
+            let subtitle;
+            switch (this.state.nature) {
+                case NATURE.DISAGREEMENT:
+                    subtitle = _t("What this user is writing is wrong.\n" +
+                        "This will be reported to the room moderators.");
+                    break;
+                case NATURE.TOXIC:
+                    subtitle = _t("This user is displaying toxic behaviour, " +
+                        "for instance by insulting other users or sharing " +
+                        " adult-only content in a family-friendly room " +
+                        " or otherwise violating the rules of this room.\n" +
+                        "This will be reported to the room moderators.");
+                    break;
+                case NATURE.ILLEGAL:
+                    subtitle = _t("This user is displaying illegal behaviour, " +
+                        "for instance by doxing people or threatening violence.\n" +
+                        "This will be reported to the room moderators who may escalate this to legal authorities.");
+                    break;
+                case NATURE.SPAM:
+                    subtitle = _t("This user is spamming the room with ads, links to ads or to propaganda.\n" +
+                        "This will be reported to the room moderators.");
+                    break;
+                case NON_STANDARD_NATURE.ADMIN:
+                    if (client.isRoomEncrypted(this.props.mxEvent.getRoomId())) {
+                        subtitle = _t("This room is dedicated to illegal or toxic content " +
+                            "or the moderators fail to moderate illegal or toxic content.\n" +
+                            "This will be reported to the administrators of %(homeserver)s. " +
+                            "The administrators will NOT be able to read the encrypted content of this room.",
+                        { homeserver: homeServerName });
+                    } else {
+                        subtitle = _t("This room is dedicated to illegal or toxic content " +
+                            "or the moderators fail to moderate illegal or toxic content.\n" +
+                            " This will be reported to the administrators of %(homeserver)s.",
+                        { homeserver: homeServerName });
+                    }
+                    break;
+                case NATURE.OTHER:
+                    subtitle = _t("Any other reason. Please describe the problem.\n" +
+                        "This will be reported to the room moderators.");
+                    break;
+                default:
+                    subtitle = _t("Please pick a nature and describe what makes this message abusive.");
+                    break;
+            }
+
+            return (
+                <BaseDialog
+                    className="mx_ReportEventDialog"
+                    onFinished={this.props.onFinished}
+                    title={_t('Report Content')}
+                    contentId='mx_ReportEventDialog'
+                >
+                    <div>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NATURE.DISAGREEMENT }
+                            checked = { this.state.nature == NATURE.DISAGREEMENT }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Disagree')}
+                        </StyledRadioButton>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NATURE.TOXIC }
+                            checked = { this.state.nature == NATURE.TOXIC }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Toxic Behaviour')}
+                        </StyledRadioButton>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NATURE.ILLEGAL }
+                            checked = { this.state.nature == NATURE.ILLEGAL }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Illegal Content')}
+                        </StyledRadioButton>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NATURE.SPAM }
+                            checked = { this.state.nature == NATURE.SPAM }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Spam or propaganda')}
+                        </StyledRadioButton>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NON_STANDARD_NATURE.ADMIN }
+                            checked = { this.state.nature == NON_STANDARD_NATURE.ADMIN }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Report the entire room')}
+                        </StyledRadioButton>
+                        <StyledRadioButton
+                            name = "nature"
+                            value = { NATURE.OTHER }
+                            checked = { this.state.nature == NATURE.OTHER }
+                            onChange = { this.onNatureChosen }
+                        >
+                            {_t('Other')}
+                        </StyledRadioButton>
+                        <p>
+                            {subtitle}
+                        </p>
+                        <Field
+                            className="mx_ReportEventDialog_reason"
+                            element="textarea"
+                            label={_t("Reason")}
+                            rows={5}
+                            onChange={this.onReasonChange}
+                            value={this.state.reason}
+                            disabled={this.state.busy}
+                        />
+                        {progress}
+                        {error}
+                    </div>
+                    <DialogButtons
+                        primaryButton={_t("Send report")}
+                        onPrimaryButtonClick={this.onSubmit}
+                        focus={true}
+                        onCancel={this.onCancel}
+                        disabled={this.state.busy}
+                    />
+                </BaseDialog>
+            );
+        }
+        // Report to homeserver admin.
+        // Currently, the API does not support natures.
+        return (
+            <BaseDialog
+                className="mx_ReportEventDialog"
+                onFinished={this.props.onFinished}
+                title={_t('Report Content to Your Homeserver Administrator')}
+                contentId='mx_ReportEventDialog'
+            >
+                <div className="mx_ReportEventDialog" id="mx_ReportEventDialog">
+                    <p>
+                        {
+                            _t("Reporting this message will send its unique 'event ID' to the administrator of " +
+                                "your homeserver. If messages in this room are encrypted, your homeserver " +
+                                "administrator will not be able to read the message text or view any files " +
+                                "or images.")
+                        }
+                    </p>
+                    {adminMessage}
+                    <Field
+                        className="mx_ReportEventDialog_reason"
+                        element="textarea"
+                        label={_t("Reason")}
+                        rows={5}
+                        onChange={this.onReasonChange}
+                        value={this.state.reason}
+                        disabled={this.state.busy}
+                    />
+                    {progress}
+                    {error}
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Send report")}
+                    onPrimaryButtonClick={this.onSubmit}
+                    focus={true}
+                    onCancel={this.onCancel}
+                    disabled={this.state.busy}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import TabbedView, {Tab} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
@@ -39,31 +38,36 @@ export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
 export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
 export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
 
+interface IProps {
+    roomId: string;
+    onFinished: (success: boolean) => void;
+    initialTabId?: string;
+}
+
 @replaceableComponent("views.dialogs.RoomSettingsDialog")
-export default class RoomSettingsDialog extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class RoomSettingsDialog extends React.Component<IProps> {
+    private dispatcherRef: string;
 
-    componentDidMount() {
-        this._dispatcherRef = dis.register(this._onAction);
+    public componentDidMount() {
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
-    componentWillUnmount() {
-        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
+    public componentWillUnmount() {
+        if (this.dispatcherRef) {
+            dis.unregister(this.dispatcherRef);
+        }
     }
 
-    _onAction = (payload) => {
+    private onAction = (payload): void => {
         // When view changes below us, close the room settings
         // whilst the modal is open this can only be triggered when someone hits Leave Room
         if (payload.action === 'view_home_page') {
-            this.props.onFinished();
+            this.props.onFinished(true);
         }
     };
 
-    _getTabs() {
-        const tabs = [];
+    private getTabs(): Tab[] {
+        const tabs: Tab[] = [];
 
         tabs.push(new Tab(
             ROOM_GENERAL_TAB,
@@ -104,7 +108,10 @@ export default class RoomSettingsDialog extends React.Component {
                 ROOM_ADVANCED_TAB,
                 _td("Advanced"),
                 "mx_RoomSettingsDialog_warningIcon",
-                <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,
+                <AdvancedRoomSettingsTab
+                    roomId={this.props.roomId}
+                    closeSettingsFn={() => this.props.onFinished(true)}
+                />,
             ));
         }
 
@@ -123,7 +130,10 @@ export default class RoomSettingsDialog extends React.Component {
                 title={_t("Room Settings - %(roomName)s", {roomName})}
             >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} />
+                    <TabbedView
+                        tabs={this.getTabs()}
+                        initialTabId={this.props.initialTabId}
+                    />
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -217,6 +217,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                         value={this.state.otherHomeserver}
                         validateOnChange={false}
                         validateOnFocus={false}
+                        id="mx_homeserverInput"
                     />
                 </StyledRadioButton>
                 <p>

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -14,24 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import React, { useMemo } from 'react';
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import {_t} from '../../../languageHandler';
-import {IDialogProps} from "./IDialogProps";
+import { _t, _td } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import DevtoolsDialog from "./DevtoolsDialog";
-import SpaceBasicSettings from '../spaces/SpaceBasicSettings';
-import {getTopic} from "../elements/RoomTopic";
-import {avatarUrlForRoom} from "../../../Avatar";
-import ToggleSwitch from "../elements/ToggleSwitch";
-import AccessibleButton from "../elements/AccessibleButton";
-import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {allSettled} from "../../../utils/promise";
-import {useDispatcher} from "../../../hooks/useDispatcher";
+import { useDispatcher } from "../../../hooks/useDispatcher";
+import TabbedView, { Tab } from "../../structures/TabbedView";
+import SpaceSettingsGeneralTab from '../spaces/SpaceSettingsGeneralTab';
+import SpaceSettingsVisibilityTab from "../spaces/SpaceSettingsVisibilityTab";
+import SettingsStore from "../../../settings/SettingsStore";
+import { UIFeature } from "../../../settings/UIFeature";
+import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
+
+export enum SpaceSettingsTab {
+    General = "SPACE_GENERAL_TAB",
+    Visibility = "SPACE_VISIBILITY_TAB",
+    Advanced = "SPACE_ADVANCED_TAB",
+}
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -45,59 +48,30 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
         }
     });
 
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-
-    const userId = cli.getUserId();
-
-    const [newAvatar, setNewAvatar] = useState<File>(null); // undefined means to remove avatar
-    const canSetAvatar = space.currentState.maySendStateEvent(EventType.RoomAvatar, userId);
-    const avatarChanged = newAvatar !== null;
-
-    const [name, setName] = useState<string>(space.name);
-    const canSetName = space.currentState.maySendStateEvent(EventType.RoomName, userId);
-    const nameChanged = name !== space.name;
-
-    const currentTopic = getTopic(space);
-    const [topic, setTopic] = useState<string>(currentTopic);
-    const canSetTopic = space.currentState.maySendStateEvent(EventType.RoomTopic, userId);
-    const topicChanged = topic !== currentTopic;
-
-    const currentJoinRule = space.getJoinRule();
-    const [joinRule, setJoinRule] = useState(currentJoinRule);
-    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
-    const joinRuleChanged = joinRule !== currentJoinRule;
-
-    const onSave = async () => {
-        setBusy(true);
-        const promises = [];
-
-        if (avatarChanged) {
-            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
-                url: await cli.uploadContent(newAvatar),
-            }, ""));
-        }
-
-        if (nameChanged) {
-            promises.push(cli.setRoomName(space.roomId, name));
-        }
-
-        if (topicChanged) {
-            promises.push(cli.setRoomTopic(space.roomId, topic));
-        }
-
-        if (joinRuleChanged) {
-            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
-        }
-
-        const results = await allSettled(promises);
-        setBusy(false);
-        const failures = results.filter(r => r.status === "rejected");
-        if (failures.length > 0) {
-            console.error("Failed to save space settings: ", failures);
-            setError(_t("Failed to save space settings."));
-        }
-    };
+    const tabs = useMemo(() => {
+        return [
+            new Tab(
+                SpaceSettingsTab.General,
+                _td("General"),
+                "mx_SpaceSettingsDialog_generalIcon",
+                <SpaceSettingsGeneralTab matrixClient={cli} space={space} onFinished={onFinished} />,
+            ),
+            new Tab(
+                SpaceSettingsTab.Visibility,
+                _td("Visibility"),
+                "mx_SpaceSettingsDialog_visibilityIcon",
+                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} />,
+            ),
+            SettingsStore.getValue(UIFeature.AdvancedSettings)
+                ? new Tab(
+                    SpaceSettingsTab.Advanced,
+                    _td("Advanced"),
+                    "mx_RoomSettingsDialog_warningIcon",
+                    <AdvancedRoomSettingsTab roomId={space.roomId} closeSettingsFn={onFinished} />,
+                )
+                : null,
+        ].filter(Boolean);
+    }, [cli, space, onFinished]);
 
     return <BaseDialog
         title={_t("Space settings")}
@@ -106,59 +80,14 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
         onFinished={onFinished}
         fixedWidth={false}
     >
-        <div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
-            <div>{ _t("Edit settings relating to your space.") }</div>
-
-            { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-
-            <SpaceBasicSettings
-                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
-                avatarDisabled={!canSetAvatar}
-                setAvatar={setNewAvatar}
-                name={name}
-                nameDisabled={!canSetName}
-                setName={setName}
-                topic={topic}
-                topicDisabled={!canSetTopic}
-                setTopic={setTopic}
-            />
-
-            <div>
-                { _t("Make this space private") }
-                <ToggleSwitch
-                    checked={joinRule !== "public"}
-                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
-                    disabled={!canSetJoinRule}
-                    aria-label={_t("Make this space private")}
-                />
-            </div>
-
-            <AccessibleButton
-                kind="danger"
-                onClick={() => {
-                    defaultDispatcher.dispatch({
-                        action: "leave_room",
-                        room_id: space.roomId,
-                    });
-                }}
-            >
-                { _t("Leave Space") }
-            </AccessibleButton>
-
-            <div className="mx_SpaceSettingsDialog_buttons">
-                <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
-                    { _t("View dev tools") }
-                </AccessibleButton>
-                <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
-                    { _t("Cancel") }
-                </AccessibleButton>
-                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
-                    { busy ? _t("Saving...") : _t("Save Changes") }
-                </AccessibleButton>
-            </div>
+        <div
+            className="mx_SpaceSettingsDialog_content"
+            id="mx_SpaceSettingsDialog"
+            title={_t("Settings - %(spaceName)s", { spaceName: space.name })}
+        >
+            <TabbedView tabs={tabs} />
         </div>
     </BaseDialog>;
 };
 
 export default SpaceSettingsDialog;
-

src/components/views/dialogs/TermsDialog.tsx

@@ -16,22 +16,21 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
 import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
 
-class TermsCheckbox extends React.PureComponent {
-    static propTypes = {
-        onChange: PropTypes.func.isRequired,
-        url: PropTypes.string.isRequired,
-        checked: PropTypes.bool.isRequired,
-    }
+interface ITermsCheckboxProps {
+    onChange: (url: string, checked: boolean) => void;
+    url: string;
+    checked: boolean;
+}
 
-    onChange = (ev) => {
-        this.props.onChange(this.props.url, ev.target.checked);
+class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
+    private onChange = (ev: React.FormEvent<HTMLInputElement>): void => {
+        this.props.onChange(this.props.url, ev.currentTarget.checked);
     }
 
     render() {
@@ -42,30 +41,34 @@ class TermsCheckbox extends React.PureComponent {
     }
 }
 
+interface ITermsDialogProps {
+    /**
+     * Array of [Service, policies] pairs, where policies is the response from the
+     * /terms endpoint for that service
+     */
+    policiesAndServicePairs: any[],
+
+    /**
+     * urls that the user has already agreed to
+     */
+    agreedUrls?: string[],
+
+    /**
+     * Called with:
+     *     * success {bool} True if the user accepted any douments, false if cancelled
+     *     * agreedUrls {string[]} List of agreed URLs
+     */
+    onFinished: (success: boolean, agreedUrls?: string[]) => void,
+}
+
+interface IState {
+    agreedUrls: any;
+}
+
 @replaceableComponent("views.dialogs.TermsDialog")
-export default class TermsDialog extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Array of [Service, policies] pairs, where policies is the response from the
-         * /terms endpoint for that service
-         */
-        policiesAndServicePairs: PropTypes.array.isRequired,
-
-        /**
-         * urls that the user has already agreed to
-         */
-        agreedUrls: PropTypes.arrayOf(PropTypes.string),
-
-        /**
-         * Called with:
-         *     * success {bool} True if the user accepted any douments, false if cancelled
-         *     * agreedUrls {string[]} List of agreed URLs
-         */
-        onFinished: PropTypes.func.isRequired,
-    }
-
+export default class TermsDialog extends React.PureComponent<ITermsDialogProps, IState> {
     constructor(props) {
-        super();
+        super(props);
         this.state = {
             // url -> boolean
             agreedUrls: {},
@@ -75,15 +78,15 @@ export default class TermsDialog extends React.PureComponent {
         }
     }
 
-    _onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(false);
     }
 
-    _onNextClick = () => {
+    private onNextClick = (): void => {
         this.props.onFinished(true, Object.keys(this.state.agreedUrls).filter((url) => this.state.agreedUrls[url]));
     }
 
-    _nameForServiceType(serviceType, host) {
+    private nameForServiceType(serviceType: SERVICE_TYPES, host: string): JSX.Element {
         switch (serviceType) {
             case SERVICE_TYPES.IS:
                 return <div>{_t("Identity Server")}<br />({host})</div>;
@@ -92,7 +95,7 @@ export default class TermsDialog extends React.PureComponent {
         }
     }
 
-    _summaryForServiceType(serviceType) {
+    private summaryForServiceType(serviceType: SERVICE_TYPES): JSX.Element {
         switch (serviceType) {
             case SERVICE_TYPES.IS:
                 return <div>
@@ -107,13 +110,13 @@ export default class TermsDialog extends React.PureComponent {
         }
     }
 
-    _onTermsCheckboxChange = (url, checked) => {
+    private onTermsCheckboxChange = (url: string, checked: boolean) => {
         this.setState({
             agreedUrls: Object.assign({}, this.state.agreedUrls, { [url]: checked }),
         });
     }
 
-    render() {
+    public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -128,8 +131,8 @@ export default class TermsDialog extends React.PureComponent {
                 let serviceName;
                 let summary;
                 if (i === 0) {
-                    serviceName = this._nameForServiceType(policiesAndService.service.serviceType, parsedBaseUrl.host);
-                    summary = this._summaryForServiceType(
+                    serviceName = this.nameForServiceType(policiesAndService.service.serviceType, parsedBaseUrl.host);
+                    summary = this.summaryForServiceType(
                         policiesAndService.service.serviceType,
                     );
                 }
@@ -137,12 +140,15 @@ export default class TermsDialog extends React.PureComponent {
                 rows.push(<tr key={termDoc[termsLang].url}>
                     <td className="mx_TermsDialog_service">{serviceName}</td>
                     <td className="mx_TermsDialog_summary">{summary}</td>
-                    <td>{termDoc[termsLang].name} <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
-                        <span className="mx_TermsDialog_link" />
-                    </a></td>
+                    <td>
+                        {termDoc[termsLang].name}
+                        <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
+                            <span className="mx_TermsDialog_link" />
+                        </a>
+                    </td>
                     <td><TermsCheckbox
                         url={termDoc[termsLang].url}
-                        onChange={this._onTermsCheckboxChange}
+                        onChange={this.onTermsCheckboxChange}
                         checked={Boolean(this.state.agreedUrls[termDoc[termsLang].url])}
                     /></td>
                 </tr>);
@@ -176,7 +182,7 @@ export default class TermsDialog extends React.PureComponent {
         return (
             <BaseDialog
                 fixedWidth={false}
-                onFinished={this._onCancelClick}
+                onFinished={this.onCancelClick}
                 title={_t("Terms of Service")}
                 contentId='mx_Dialog_content'
                 hasCancel={false}
@@ -197,8 +203,8 @@ export default class TermsDialog extends React.PureComponent {
 
                 <DialogButtons primaryButton={_t('Next')}
                     hasCancel={true}
-                    onCancel={this._onCancelClick}
-                    onPrimaryButtonClick={this._onNextClick}
+                    onCancel={this.onCancelClick}
+                    onPrimaryButtonClick={this.onNextClick}
                     primaryDisabled={!enableSubmit}
                 />
             </BaseDialog>

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2019, 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { User } from "matrix-js-sdk/src/models/user";
+
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import E2EIcon from "../rooms/E2EIcon";
+import AccessibleButton from "../elements/AccessibleButton";
+import BaseDialog from "./BaseDialog";
+import { IDialogProps } from "./IDialogProps";
+import { IDevice } from "../right_panel/UserInfo";
+
+interface IProps extends IDialogProps {
+    user: User;
+    device: IDevice;
+}
+
+const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
+    let askToVerifyText;
+    let newSessionText;
+
+    if (MatrixClientPeg.get().getUserId() === user.userId) {
+        newSessionText = _t("You signed in to a new session without verifying it:");
+        askToVerifyText = _t("Verify your other session using one of the options below.");
+    } else {
+        newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
+            {name: user.displayName, userId: user.userId});
+        askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
+    }
+
+    return <BaseDialog
+        onFinished={onFinished}
+        className="mx_UntrustedDeviceDialog"
+        title={<>
+            <E2EIcon status="warning" size={24} hideTooltip={true} />
+            { _t("Not Trusted")}
+        </>}
+    >
+        <div className="mx_Dialog_content" id='mx_Dialog_content'>
+            <p>{newSessionText}</p>
+            <p>{device.getDisplayName()} ({device.deviceId})</p>
+            <p>{askToVerifyText}</p>
+        </div>
+        <div className='mx_Dialog_buttons'>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>
+                { _t("Manually Verify by Text") }
+            </AccessibleButton>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>
+                { _t("Interactively verify by Emoji") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" onClick={() => onFinished(false)}>
+                { _t("Done") }
+            </AccessibleButton>
+        </div>
+    </BaseDialog>;
+};
+
+export default UntrustedDeviceDialog;

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -16,11 +16,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import TabbedView, {Tab} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
-import SettingsStore from "../../../settings/SettingsStore";
+import SettingsStore, { CallbackFn } from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
 import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
 import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
@@ -35,41 +34,49 @@ import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab
 import {UIFeature} from "../../../settings/UIFeature";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
-export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
-export const USER_FLAIR_TAB = "USER_FLAIR_TAB";
-export const USER_NOTIFICATIONS_TAB = "USER_NOTIFICATIONS_TAB";
-export const USER_PREFERENCES_TAB = "USER_PREFERENCES_TAB";
-export const USER_VOICE_TAB = "USER_VOICE_TAB";
-export const USER_SECURITY_TAB = "USER_SECURITY_TAB";
-export const USER_LABS_TAB = "USER_LABS_TAB";
-export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB";
-export const USER_HELP_TAB = "USER_HELP_TAB";
+export enum UserTab {
+    General = "USER_GENERAL_TAB",
+    Appearance = "USER_APPEARANCE_TAB",
+    Flair = "USER_FLAIR_TAB",
+    Notifications = "USER_NOTIFICATIONS_TAB",
+    Preferences = "USER_PREFERENCES_TAB",
+    Voice = "USER_VOICE_TAB",
+    Security = "USER_SECURITY_TAB",
+    Labs = "USER_LABS_TAB",
+    Mjolnir = "USER_MJOLNIR_TAB",
+    Help = "USER_HELP_TAB",
+}
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+    initialTabId?: string;
+}
+
+interface IState {
+    mjolnirEnabled: boolean;
+}
 
 @replaceableComponent("views.dialogs.UserSettingsDialog")
-export default class UserSettingsDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        initialTabId: PropTypes.string,
-    };
+export default class UserSettingsDialog extends React.Component<IProps, IState> {
+    private mjolnirWatcher: string;
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             mjolnirEnabled: SettingsStore.getValue("feature_mjolnir"),
         };
     }
 
-    componentDidMount(): void {
-        this._mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this._mjolnirChanged.bind(this));
+    public componentDidMount(): void {
+        this.mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this.mjolnirChanged);
     }
 
-    componentWillUnmount(): void {
-        SettingsStore.unwatchSetting(this._mjolnirWatcher);
+    public componentWillUnmount(): void {
+        SettingsStore.unwatchSetting(this.mjolnirWatcher);
     }
 
-    _mjolnirChanged(settingName, roomId, atLevel, newValue) {
+    private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
         // We can cheat because we know what levels a feature is tracked at, and how it is tracked
         this.setState({mjolnirEnabled: newValue});
     }
@@ -78,33 +85,33 @@ export default class UserSettingsDialog extends React.Component {
         const tabs = [];
 
         tabs.push(new Tab(
-            USER_GENERAL_TAB,
+            UserTab.General,
             _td("General"),
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         tabs.push(new Tab(
-            USER_APPEARANCE_TAB,
+            UserTab.Appearance,
             _td("Appearance"),
             "mx_UserSettingsDialog_appearanceIcon",
             <AppearanceUserSettingsTab />,
         ));
         if (SettingsStore.getValue(UIFeature.Flair)) {
             tabs.push(new Tab(
-                USER_FLAIR_TAB,
+                UserTab.Flair,
                 _td("Flair"),
                 "mx_UserSettingsDialog_flairIcon",
                 <FlairUserSettingsTab />,
             ));
         }
         tabs.push(new Tab(
-            USER_NOTIFICATIONS_TAB,
+            UserTab.Notifications,
             _td("Notifications"),
             "mx_UserSettingsDialog_bellIcon",
             <NotificationUserSettingsTab />,
         ));
         tabs.push(new Tab(
-            USER_PREFERENCES_TAB,
+            UserTab.Preferences,
             _td("Preferences"),
             "mx_UserSettingsDialog_preferencesIcon",
             <PreferencesUserSettingsTab />,
@@ -112,7 +119,7 @@ export default class UserSettingsDialog extends React.Component {
 
         if (SettingsStore.getValue(UIFeature.Voip)) {
             tabs.push(new Tab(
-                USER_VOICE_TAB,
+                UserTab.Voice,
                 _td("Voice & Video"),
                 "mx_UserSettingsDialog_voiceIcon",
                 <VoiceUserSettingsTab />,
@@ -120,14 +127,17 @@ export default class UserSettingsDialog extends React.Component {
         }
 
         tabs.push(new Tab(
-            USER_SECURITY_TAB,
+            UserTab.Security,
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
             <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
-        if (SdkConfig.get()['showLabsSettings']) {
+        // Show the Labs tab if enabled or if there are any active betas
+        if (SdkConfig.get()['showLabsSettings']
+            || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))
+        ) {
             tabs.push(new Tab(
-                USER_LABS_TAB,
+                UserTab.Labs,
                 _td("Labs"),
                 "mx_UserSettingsDialog_labsIcon",
                 <LabsUserSettingsTab />,
@@ -135,17 +145,17 @@ export default class UserSettingsDialog extends React.Component {
         }
         if (this.state.mjolnirEnabled) {
             tabs.push(new Tab(
-                USER_MJOLNIR_TAB,
+                UserTab.Mjolnir,
                 _td("Ignored users"),
                 "mx_UserSettingsDialog_mjolnirIcon",
                 <MjolnirUserSettingsTab />,
             ));
         }
         tabs.push(new Tab(
-            USER_HELP_TAB,
+            UserTab.Help,
             _td("Help & About"),
             "mx_UserSettingsDialog_helpIcon",
-            <HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
+            <HelpUserSettingsTab closeSettingsFn={() => this.props.onFinished(true)} />,
         ));
 
         return tabs;

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

@@ -345,6 +345,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                     <input
                         type="password"
+                        id="mx_passPhraseInput"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
                         onChange={this.onPassPhraseChange}
                         value={this.state.passPhrase}

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

@@ -15,22 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from "../../../../languageHandler";
+import { _t } from "../../../../languageHandler";
 import * as sdk from "../../../../index";
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
 
 @replaceableComponent("views.dialogs.security.ConfirmDestroyCrossSigningDialog")
-export default class ConfirmDestroyCrossSigningDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onConfirm = () => {
+export default class ConfirmDestroyCrossSigningDialog extends React.Component<IProps> {
+    private onConfirm = (): void => {
         this.props.onFinished(true);
     };
 
-    _onDecline = () => {
+    private onDecline = (): void => {
         this.props.onFinished(false);
     };
 
@@ -57,10 +56,10 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Clear cross-signing keys")}
-                    onPrimaryButtonClick={this._onConfirm}
+                    onPrimaryButtonClick={this.onConfirm}
                     primaryButtonClass="danger"
                     cancelButton={_t("Cancel")}
-                    onCancel={this._onDecline}
+                    onCancel={this.onDecline}
                 />
             </BaseDialog>
         );

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

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import { _t } from '../../../../languageHandler';
 import Modal from '../../../../Modal';
@@ -25,7 +24,19 @@ import DialogButtons from '../../elements/DialogButtons';
 import BaseDialog from '../BaseDialog';
 import Spinner from '../../elements/Spinner';
 import InteractiveAuthDialog from '../InteractiveAuthDialog';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
+
+interface IProps {
+    accountPassword?: string;
+    tokenLogin?: boolean;
+    onFinished?: (success: boolean) => void;
+}
+
+interface IState {
+    error: Error | null;
+    canUploadKeysWithPasswordOnly?: boolean;
+    accountPassword: string;
+}
 
 /*
  * Walks the user through the process of creating a cross-signing keys. In most
@@ -33,39 +44,32 @@ import {replaceableComponent} from "../../../../utils/replaceableComponent";
  * may need to complete some steps to proceed.
  */
 @replaceableComponent("views.dialogs.security.CreateCrossSigningDialog")
-export default class CreateCrossSigningDialog extends React.PureComponent {
-    static propTypes = {
-        accountPassword: PropTypes.string,
-        tokenLogin: PropTypes.bool,
-    };
-
-    constructor(props) {
+export default class CreateCrossSigningDialog extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
             error: null,
             // Does the server offer a UI auth flow with just m.login.password
             // for /keys/device_signing/upload?
-            canUploadKeysWithPasswordOnly: null,
-            accountPassword: props.accountPassword || "",
-        };
-
-        if (this.state.accountPassword) {
             // If we have an account password in memory, let's simplify and
             // assume it means password auth is also supported for device
             // signing key upload as well. This avoids hitting the server to
             // test auth flows, which may be slow under high load.
-            this.state.canUploadKeysWithPasswordOnly = true;
-        } else {
-            this._queryKeyUploadAuth();
+            canUploadKeysWithPasswordOnly: props.accountPassword ? true : null,
+            accountPassword: props.accountPassword || "",
+        };
+
+        if (!this.state.accountPassword) {
+            this.queryKeyUploadAuth();
         }
     }
 
-    componentDidMount() {
-        this._bootstrapCrossSigning();
+    public componentDidMount(): void {
+        this.bootstrapCrossSigning();
     }
 
-    async _queryKeyUploadAuth() {
+    private async queryKeyUploadAuth(): Promise<void> {
         try {
             await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {});
             // We should never get here: the server should always require
@@ -86,7 +90,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent {
         }
     }
 
-    _doBootstrapUIAuth = async (makeRequest) => {
+    private doBootstrapUIAuth = async (makeRequest: (authData: any) => void): Promise<void> => {
         if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
             await makeRequest({
                 type: 'm.login.password',
@@ -137,7 +141,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent {
         }
     }
 
-    _bootstrapCrossSigning = async () => {
+    private bootstrapCrossSigning = async (): Promise<void> => {
         this.setState({
             error: null,
         });
@@ -146,13 +150,13 @@ export default class CreateCrossSigningDialog extends React.PureComponent {
 
         try {
             await cli.bootstrapCrossSigning({
-                authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
+                authUploadDeviceSigningKeys: this.doBootstrapUIAuth,
             });
             this.props.onFinished(true);
         } catch (e) {
             if (this.props.tokenLogin) {
                 // ignore any failures, we are relying on grace period here
-                this.props.onFinished();
+                this.props.onFinished(false);
                 return;
             }
 
@@ -161,7 +165,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent {
         }
     }
 
-    _onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     }
 
@@ -172,8 +176,8 @@ export default class CreateCrossSigningDialog extends React.PureComponent {
                 <p>{_t("Unable to set up keys")}</p>
                 <div className="mx_Dialog_buttons">
                     <DialogButtons primaryButton={_t('Retry')}
-                        onPrimaryButtonClick={this._bootstrapCrossSigning}
-                        onCancel={this._onCancel}
+                        onPrimaryButtonClick={this.bootstrapCrossSigning}
+                        onCancel={this.onCancel}
                     />
                 </div>
             </div>;

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

@@ -15,47 +15,52 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
 import BaseDialog from '../BaseDialog';
 import { _t } from '../../../../languageHandler';
-import { SetupEncryptionStore, PHASE_DONE } from '../../../../stores/SetupEncryptionStore';
+import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
 import {replaceableComponent} from "../../../../utils/replaceableComponent";
 
-function iconFromPhase(phase) {
-    if (phase === PHASE_DONE) {
+function iconFromPhase(phase: Phase) {
+    if (phase === Phase.Done) {
         return require("../../../../../res/img/e2e/verified.svg");
     } else {
         return require("../../../../../res/img/e2e/warning.svg");
     }
 }
 
-@replaceableComponent("views.dialogs.security.SetupEncryptionDialog")
-export default class SetupEncryptionDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
 
-    constructor() {
-        super();
+interface IState {
+    icon: Phase;
+}
+
+@replaceableComponent("views.dialogs.security.SetupEncryptionDialog")
+export default class SetupEncryptionDialog extends React.Component<IProps, IState> {
+    private store: SetupEncryptionStore;
+
+    constructor(props: IProps) {
+        super(props);
 
         this.store = SetupEncryptionStore.sharedInstance();
         this.state = {icon: iconFromPhase(this.store.phase)};
     }
 
-    componentDidMount() {
-        this.store.on("update", this._onStoreUpdate);
+    public componentDidMount() {
+        this.store.on("update", this.onStoreUpdate);
     }
 
-    componentWillUnmount() {
-        this.store.removeListener("update", this._onStoreUpdate);
+    public componentWillUnmount() {
+        this.store.removeListener("update", this.onStoreUpdate);
     }
 
-    _onStoreUpdate = () => {
+    private onStoreUpdate = (): void => {
         this.setState({icon: iconFromPhase(this.store.phase)});
     };
 
-    render() {
+    public render() {
         return <BaseDialog
             headerImage={this.state.icon}
             onFinished={this.props.onFinished}

src/components/views/directory/NetworkDropdown.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2016, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,39 +15,56 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect, useState} from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from "react";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { instanceForInstanceId } from '../../../utils/DirectoryUtils';
 import {
+    ChevronFace,
     ContextMenu,
-    useContextMenu,
     ContextMenuButton,
-    MenuItemRadio,
-    MenuItem,
     MenuGroup,
+    MenuItem,
+    MenuItemRadio,
+    useContextMenu,
 } from "../../structures/ContextMenu";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import {useSettingValue} from "../../../hooks/useSettings";
-import * as sdk from "../../../index";
+import { useSettingValue } from "../../../hooks/useSettings";
 import Modal from "../../../Modal";
 import SettingsStore from "../../../settings/SettingsStore";
 import withValidation from "../elements/Validation";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import TextInputDialog from "../dialogs/TextInputDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import UIStore from "../../../stores/UIStore";
+import { compare } from "../../../utils/strings";
 
 export const ALL_ROOMS = Symbol("ALL_ROOMS");
 
 const SETTING_NAME = "room_directory_servers";
 
-const inPlaceOf = (elementRect) => ({
-    right: window.innerWidth - elementRect.right,
+const inPlaceOf = (elementRect: Pick<DOMRect, "right" | "top">) => ({
+    right: UIStore.instance.windowWidth - elementRect.right,
     top: elementRect.top,
     chevronOffset: 0,
-    chevronFace: "none",
+    chevronFace: ChevronFace.None,
 });
 
-const validServer = withValidation({
+const validServer = withValidation<undefined, { error?: MatrixError }>({
+    deriveData: async ({ value }) => {
+        try {
+            // check if we can successfully load this server's room directory
+            await MatrixClientPeg.get().publicRooms({
+                limit: 1,
+                server: value,
+            });
+            return {};
+        } catch (error) {
+            return { error };
+        }
+    },
     rules: [
         {
             key: "required",
@@ -57,34 +73,58 @@ const validServer = withValidation({
         }, {
             key: "available",
             final: true,
-            test: async ({ value }) => {
-                try {
-                    const opts = {
-                        limit: 1,
-                        server: value,
-                    };
-                    // check if we can successfully load this server's room directory
-                    await MatrixClientPeg.get().publicRooms(opts);
-                    return true;
-                } catch (e) {
-                    return false;
-                }
-            },
+            test: async (_, { error }) => !error,
             valid: () => _t("Looks good"),
-            invalid: () => _t("Can't find this server or its room list"),
+            invalid: ({ error }) => error.errcode === "M_FORBIDDEN"
+                ? _t("You are not allowed to view this server's rooms list")
+                : _t("Can't find this server or its room list"),
         },
     ],
 });
 
+/* eslint-disable camelcase */
+export interface IFieldType {
+    regexp: string;
+    placeholder: string;
+}
+
+export interface IInstance {
+    desc: string;
+    icon?: string;
+    fields: object;
+    network_id: string;
+    // XXX: this is undocumented but we rely on it.
+    // we inject a fake entry with a symbolic instance_id.
+    instance_id: string | symbol;
+}
+
+export interface IProtocol {
+    user_fields: string[];
+    location_fields: string[];
+    icon: string;
+    field_types: Record<string, IFieldType>;
+    instances: IInstance[];
+}
+/* eslint-enable camelcase */
+
+export type Protocols = Record<string, IProtocol>;
+
+interface IProps {
+    protocols: Protocols;
+    selectedServerName: string;
+    selectedInstanceId: string | symbol;
+    onOptionChange(server: string, instanceId?: string | symbol): void;
+}
+
 // This dropdown sources homeservers from three places:
 // + your currently connected homeserver
 // + homeservers in config.json["roomDirectory"]
 // + homeservers in SettingsStore["room_directory_servers"]
 // if a server exists in multiple, only keep the top-most entry.
 
-const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, selectedInstanceId}) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
-    const _userDefinedServers = useSettingValue(SETTING_NAME);
+const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, selectedInstanceId }: IProps) => {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+    const _userDefinedServers: string[] = useSettingValue(SETTING_NAME);
     const [userDefinedServers, _setUserDefinedServers] = useState(_userDefinedServers);
 
     const handlerFactory = (server, instanceId) => {
@@ -96,7 +136,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
 
     const setUserDefinedServers = servers => {
         _setUserDefinedServers(servers);
-        SettingsStore.setValue(SETTING_NAME, null, "account", servers);
+        SettingsStore.setValue(SETTING_NAME, null, SettingLevel.ACCOUNT, servers);
     };
     // keep local echo up to date with external changes
     useEffect(() => {
@@ -110,7 +150,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
         const roomDirectory = config.roomDirectory || {};
 
         const hsName = MatrixClientPeg.getHomeserverName();
-        const configServers = new Set(roomDirectory.servers);
+        const configServers = new Set<string>(roomDirectory.servers);
 
         // configured servers take preference over user-defined ones, if one occurs in both ignore the latter one.
         const removableServers = new Set(userDefinedServers.filter(s => !configServers.has(s) && s !== hsName));
@@ -134,15 +174,21 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                 // add a fake protocol with the ALL_ROOMS symbol
                 protocolsList.push({
                     instances: [{
+                        fields: [],
+                        network_id: "",
                         instance_id: ALL_ROOMS,
                         desc: _t("All rooms"),
                     }],
+                    location_fields: [],
+                    user_fields: [],
+                    field_types: {},
+                    icon: "",
                 });
             }
 
             protocolsList.forEach(({instances=[]}) => {
                 [...instances].sort((b, a) => {
-                    return a.desc.localeCompare(b.desc);
+                    return compare(a.desc, b.desc);
                 }).forEach(({desc, instance_id: instanceId}) => {
                     entries.push(
                         <MenuItemRadio
@@ -170,7 +216,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
             if (removableServers.has(server)) {
                 const onClick = async () => {
                     closeMenu();
-                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                     const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
                         title: _t("Are you sure?"),
                         description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
@@ -189,7 +234,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                     setUserDefinedServers(servers.filter(s => s !== server));
 
                     // the selected server is being removed, reset to our HS
-                    if (serverSelected === server) {
+                    if (serverSelected) {
                         onOptionChange(hsName, undefined);
                     }
                 };
@@ -221,7 +266,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
 
         const onClick = async () => {
             closeMenu();
-            const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
             const { finished } = Modal.createTrackedDialog("Network Dropdown", "Add a new server", TextInputDialog, {
                 title: _t("Add a new server"),
                 description: _t("Enter the name of a new server you want to explore."),
@@ -282,9 +326,4 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
     </div>;
 };
 
-NetworkDropdown.propTypes = {
-    onOptionChange: PropTypes.func.isRequired,
-    protocols: PropTypes.object,
-};
-
 export default NetworkDropdown;

src/components/views/elements/AccessibleButton.tsx

@@ -62,6 +62,8 @@ export default function AccessibleButton({
     disabled,
     inputRef,
     className,
+    onKeyDown,
+    onKeyUp,
     ...restProps
 }: IProps) {
     const newProps: IAccessibleButtonProps = restProps;
@@ -83,6 +85,8 @@ export default function AccessibleButton({
             if (e.key === Key.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();
+            } else {
+                onKeyDown?.(e);
             }
         };
         newProps.onKeyUp = (e) => {
@@ -94,6 +98,8 @@ export default function AccessibleButton({
             if (e.key === Key.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
+            } else {
+                onKeyUp?.(e);
             }
         };
     }

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip from './Tooltip';
+import Tooltip, {Alignment} from './Tooltip';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
@@ -28,6 +28,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     tooltipClassName?: string;
     forceHide?: boolean;
     yOffset?: number;
+    alignment?: Alignment;
 }
 
 interface IState {
@@ -66,14 +67,15 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, ...props} = this.props;
+        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
             label={tooltip || title}
             yOffset={yOffset}
-        /> : <div />;
+            alignment={alignment}
+        /> : null;
         return (
             <AccessibleButton
                 {...props}

src/components/views/elements/ActionButton.js

@@ -32,6 +32,7 @@ export default class ActionButton extends React.Component {
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string,
         className: PropTypes.string,
+        children: PropTypes.node,
     };
 
     static defaultProps = {
@@ -79,7 +80,8 @@ export default class ActionButton extends React.Component {
         }
 
         return (
-            <AccessibleButton className={classNames.join(" ")}
+            <AccessibleButton
+                className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
@@ -87,6 +89,7 @@ export default class ActionButton extends React.Component {
             >
                 { icon }
                 { tooltip }
+                { this.props.children }
             </AccessibleButton>
         );
     }

src/components/views/elements/AddressTile.js

@@ -20,9 +20,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
-import { UserAddressType } from '../../../UserAddress.js';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { UserAddressType } from '../../../UserAddress';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.elements.AddressTile")
 export default class AddressTile extends React.Component {

src/components/views/elements/AppTile.js

@@ -47,9 +47,14 @@ export default class AppTile extends React.Component {
 
         // The key used for PersistedElement
         this._persistKey = getPersistKey(this.props.app.id);
-        this._sgWidget = new StopGapWidget(this.props);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
+        try {
+            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;
+        }
         this.iframe = null; // ref to the iframe (callback style)
 
         this.state = this._getNewState(props);
@@ -97,7 +102,7 @@ export default class AppTile extends React.Component {
             // Force the widget to be non-persistent (able to be deleted/forgotten)
             ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             PersistedElement.destroyElement(this._persistKey);
-            this._sgWidget.stop();
+            if (this._sgWidget) this._sgWidget.stop();
         }
 
         this.setState({ hasPermissionToLoad });
@@ -117,7 +122,7 @@ export default class AppTile extends React.Component {
 
     componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
-        if (this.state.hasPermissionToLoad) {
+        if (this._sgWidget && this.state.hasPermissionToLoad) {
             this._startWidget();
         }
 
@@ -146,10 +151,15 @@ export default class AppTile extends React.Component {
         if (this._sgWidget) {
             this._sgWidget.stop();
         }
-        this._sgWidget = new StopGapWidget(newProps);
-        this._sgWidget.on("preparing", this._onWidgetPrepared);
-        this._sgWidget.on("ready", this._onWidgetReady);
-        this._startWidget();
+        try {
+            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;
+        }
     }
 
     _startWidget() {
@@ -161,7 +171,7 @@ export default class AppTile extends React.Component {
     _iframeRefChange = (ref) => {
         this.iframe = ref;
         if (ref) {
-            this._sgWidget.start(ref);
+            if (this._sgWidget) this._sgWidget.start(ref);
         } else {
             this._resetWidget(this.props);
         }
@@ -209,7 +219,7 @@ export default class AppTile extends React.Component {
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        this._sgWidget.stop({forceDestroy: true});
+        if (this._sgWidget) this._sgWidget.stop({forceDestroy: true});
     }
 
     _onWidgetPrepared = () => {
@@ -340,7 +350,13 @@ export default class AppTile extends React.Component {
                 <Spinner message={_t("Loading...")} />
             </div>
         );
-        if (!this.state.hasPermissionToLoad) {
+        if (this._sgWidget === null) {
+            appTileBody = (
+                <div className={appTileBodyClass} style={appTileBodyStyles}>
+                    <AppWarning errorMsg={_t("Error loading Widget")} />
+                </div>
+            );
+        } else if (!this.state.hasPermissionToLoad) {
             // only possible for room widgets, can assert this.props.room here
             const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
             appTileBody = (
@@ -364,7 +380,7 @@ export default class AppTile extends React.Component {
             if (this.isMixedContent()) {
                 appTileBody = (
                     <div className={appTileBodyClass} style={appTileBodyStyles}>
-                        <AppWarning errorMsg="Error - Mixed content" />
+                        <AppWarning errorMsg={_t("Error - Mixed content")} />
                     </div>
                 );
             } else {
@@ -417,6 +433,8 @@ export default class AppTile extends React.Component {
                     onFinished={this._closeContextMenu}
                     showUnpin={!this.props.userWidget}
                     userWidget={this.props.userWidget}
+                    onEditClick={this.props.onEditClick}
+                    onDeleteClick={this.props.onDeleteClick}
                 />
             );
         }

src/components/views/elements/DNDTagTile.js

@@ -18,7 +18,6 @@ limitations under the License.
 import TagTile from './TagTile';
 
 import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
 import * as sdk from '../../../index';
 
@@ -31,32 +30,17 @@ export default function DNDTagTile(props) {
         const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
         contextMenu = (
             <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
-                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} index={props.index} />
             </ContextMenu>
         );
     }
-    return <div>
-        <Draggable
-            key={props.tag}
-            draggableId={props.tag}
-            index={props.index}
-            type="draggable-TagTile"
-        >
-            {(provided, snapshot) => (
-                <div
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
-                >
-                    <TagTile
-                        {...props}
-                        contextMenuButtonRef={handle}
-                        menuDisplayed={menuDisplayed}
-                        openMenu={openMenu}
-                    />
-                </div>
-            )}
-        </Draggable>
+    return <>
+        <TagTile
+            {...props}
+            contextMenuButtonRef={handle}
+            menuDisplayed={menuDisplayed}
+            openMenu={openMenu}
+        />
         {contextMenu}
-    </div>;
+    </>;
 }

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -14,10 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from "react";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import React from "react";
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserSettingsDialog";
+
 
 export enum WarningKind {
     Files,
@@ -33,6 +37,22 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
     if (!isRoomEncrypted) return null;
     if (EventIndexPeg.get()) return null;
 
+    if (EventIndexPeg.error) {
+        return <>
+            {_t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+                a: sub => (<a onClick={(evt) => {
+                    evt.preventDefault();
+                    dis.dispatch({
+                        action: Action.ViewUserSettings,
+                        initialTabId: UserTab.Security,
+                    });
+                }}>
+                    {sub}
+                </a>),
+            })}
+        </>;
+    }
+
     const {desktopBuilds, brand} = SdkConfig.get();
 
     let text = null;

src/components/views/elements/EditableItemList.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2017, 2019 New Vector Ltd.
+Copyright 2017-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,48 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
+import React from "react";
+
+import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-export class EditableItem extends React.Component {
-    static propTypes = {
-        index: PropTypes.number,
-        value: PropTypes.string,
-        onRemove: PropTypes.func,
+interface IItemProps {
+    index?: number;
+    value?: string;
+    onRemove?(index: number): void;
+}
+
+interface IItemState {
+    verifyRemove: boolean;
+}
+
+export class EditableItem extends React.Component<IItemProps, IItemState> {
+    public state = {
+        verifyRemove: false,
     };
 
-    constructor() {
-        super();
-
-        this.state = {
-            verifyRemove: false,
-        };
-    }
-
-    _onRemove = (e) => {
+    private onRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: true});
+        this.setState({ verifyRemove: true });
     };
 
-    _onDontRemove = (e) => {
+    private onDontRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
-    _onActuallyRemove = (e) => {
+    private onActuallyRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onRemove) this.props.onRemove(this.props.index);
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
     render() {
@@ -66,14 +66,14 @@ export class EditableItem extends React.Component {
                         {_t("Are you sure?")}
                     </span>
                     <AccessibleButton
-                        onClick={this._onActuallyRemove}
+                        onClick={this.onActuallyRemove}
                         kind="primary_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
                         {_t("Yes")}
                     </AccessibleButton>
                     <AccessibleButton
-                        onClick={this._onDontRemove}
+                        onClick={this.onDontRemove}
                         kind="danger_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
@@ -85,59 +85,68 @@ export class EditableItem extends React.Component {
 
         return (
             <div className="mx_EditableItem">
-                <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
+                <div onClick={this.onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
                 <span className="mx_EditableItem_item">{this.props.value}</span>
             </div>
         );
     }
 }
 
+interface IProps {
+    id: string;
+    items: string[];
+    itemsLabel?: string;
+    noItemsLabel?: string;
+    placeholder?: string;
+    newItem?: string;
+    canEdit?: boolean;
+    canRemove?: boolean;
+    suggestionsListId?: string;
+    onItemAdded?(item: string): void;
+    onItemRemoved?(index: number): void;
+    onNewItemChanged?(item: string): void;
+}
+
 @replaceableComponent("views.elements.EditableItemList")
-export default class EditableItemList extends React.Component {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(PropTypes.string).isRequired,
-        itemsLabel: PropTypes.string,
-        noItemsLabel: PropTypes.string,
-        placeholder: PropTypes.string,
-        newItem: PropTypes.string,
-
-        onItemAdded: PropTypes.func,
-        onItemRemoved: PropTypes.func,
-        onNewItemChanged: PropTypes.func,
-
-        canEdit: PropTypes.bool,
-        canRemove: PropTypes.bool,
-    };
-
-    _onItemAdded = (e) => {
+export default class EditableItemList<P = {}> extends React.PureComponent<IProps & P> {
+    protected onItemAdded = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
     };
 
-    _onItemRemoved = (index) => {
+    protected onItemRemoved = (index) => {
         if (this.props.onItemRemoved) this.props.onItemRemoved(index);
     };
 
-    _onNewItemChanged = (e) => {
+    protected onNewItemChanged = (e) => {
         if (this.props.onNewItemChanged) this.props.onNewItemChanged(e.target.value);
     };
 
-    _renderNewItemField() {
+    protected renderNewItemField() {
         return (
             <form
-                onSubmit={this._onItemAdded}
+                onSubmit={this.onItemAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
-                <Field label={this.props.placeholder} type="text"
-                    autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
-                    list={this.props.suggestionsListId} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
-                    {_t("Add")}
+                <Field
+                    label={this.props.placeholder}
+                    type="text"
+                    autoComplete="off"
+                    value={this.props.newItem || ""}
+                    onChange={this.onNewItemChanged}
+                    list={this.props.suggestionsListId}
+                />
+                <AccessibleButton
+                    onClick={this.onItemAdded}
+                    kind="primary"
+                    type="submit"
+                    disabled={!this.props.newItem}
+                >
+                    { _t("Add") }
                 </AccessibleButton>
             </form>
         );
@@ -153,19 +162,21 @@ export default class EditableItemList extends React.Component {
                 key={item}
                 index={index}
                 value={item}
-                onRemove={this._onItemRemoved}
+                onRemove={this.onItemRemoved}
             />;
         });
 
         const editableItemsSection = this.props.canRemove ? editableItems : <ul>{editableItems}</ul>;
         const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
 
-        return (<div className="mx_EditableItemList">
-            <div className="mx_EditableItemList_label">
-                { label }
+        return (
+            <div className="mx_EditableItemList">
+                <div className="mx_EditableItemList_label">
+                    { label }
+                </div>
+                { editableItemsSection }
+                { this.props.canEdit ? this.renderNewItemField() : <div /> }
             </div>
-            { editableItemsSection }
-            { this.props.canEdit ? this._renderNewItemField() : <div /> }
-        </div>);
+        );
     }
 }

src/components/views/elements/EffectsOverlay.tsx

@@ -17,7 +17,8 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import {CHAT_EFFECTS} from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects'
+import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
     roomWidth: number;
@@ -37,7 +38,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 effect = new Effect(options);
                 effectsRef.current[name] = effect;
             } catch (err) {
-                console.warn('Unable to load effect module at \'../../../effects/${name}\'.', err);
+                console.warn(`Unable to load effect module at '../../../effects/${name}.`, err);
             }
         }
         return effect;
@@ -45,8 +46,8 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
 
     useEffect(() => {
         const resize = () => {
-            if (canvasRef.current) {
-                canvasRef.current.height = window.innerHeight;
+            if (canvasRef.current && canvasRef.current?.height !== UIStore.instance.windowHeight) {
+                canvasRef.current.height = UIStore.instance.windowHeight;
             }
         };
         const onAction = (payload: { action: string }) => {
@@ -58,12 +59,12 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         }
         const dispatcherRef = dis.register(onAction);
         const canvas = canvasRef.current;
-        canvas.height = window.innerHeight;
-        window.addEventListener('resize', resize, true);
+        canvas.height = UIStore.instance.windowHeight;
+        UIStore.instance.on(UI_EVENTS.Resize, resize);
 
         return () => {
             dis.unregister(dispatcherRef);
-            window.removeEventListener('resize', resize);
+            UIStore.instance.off(UI_EVENTS.Resize, resize);
             // eslint-disable-next-line react-hooks/exhaustive-deps
             const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
             for (const effect in currentEffects) {

src/components/views/elements/EventListSummary.tsx

@@ -63,9 +63,9 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
                 { children }
-            </div>
+            </li>
         );
     }
 

src/components/views/elements/EventTilePreview.tsx

@@ -17,13 +17,14 @@ limitations under the License.
 import React from 'react';
 import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 
 import * as Avatar from '../../../Avatar';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout} from "../../../settings/Layout";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Layout } from "../../../settings/Layout";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     /**
@@ -101,7 +102,8 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
         // Fake it more
         event.sender = {
-            name: this.props.displayName,
+            name: this.props.displayName || this.props.userId,
+            rawDisplayName: this.props.displayName,
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(
@@ -110,7 +112,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
                 );
             },
             getMxcAvatarUrl: () => this.props.avatarUrl,
-        };
+        } as RoomMember;
 
         return event;
     }
@@ -128,6 +130,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                as="div"
             />
         </div>;
     }

src/components/views/elements/Field.tsx

@@ -29,6 +29,11 @@ function getId() {
     return `${BASE_ID}_${count++}`;
 }
 
+export interface IValidateOpts {
+    focused?: boolean;
+    allowEmpty?: boolean;
+}
+
 interface IProps {
     // The field's ID, which binds the input and label together. Immutable.
     id?: string;
@@ -180,7 +185,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         }
     };
 
-    public async validate({ focused, allowEmpty = true }: {focused?: boolean, allowEmpty?: boolean}) {
+    public async validate({ focused, allowEmpty = true }: IValidateOpts) {
         if (!this.props.onValidate) {
             return;
         }

src/components/views/elements/Flair.js

@@ -116,7 +116,7 @@ export default class Flair extends React.Component {
 
     render() {
         if (this.state.profiles.length === 0) {
-            return <span className="mx_Flair" />;
+            return null;
         }
         const avatars = this.state.profiles.map((profile, index) => {
             return <FlairAvatar key={index} groupProfile={profile} />;

src/components/views/elements/FormButton.js

@@ -1,28 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import AccessibleButton from "./AccessibleButton";
-
-export default function FormButton(props) {
-    const {className, label, kind, ...restProps} = props;
-    const newClassName = (className || "") + " mx_FormButton";
-    const allProps = Object.assign({}, restProps,
-        {className: newClassName, kind: kind || "primary", children: [label]});
-    return React.createElement(AccessibleButton, allProps);
-}
-
-FormButton.propTypes = AccessibleButton.propTypes;

src/components/views/elements/ImageView.tsx

@@ -19,20 +19,20 @@ limitations under the License.
 import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import {Key} from "../../../Keyboard";
+import { Key } from "../../../Keyboard";
 import FocusLock from "react-focus-lock";
 import MemberAvatar from "../avatars/MemberAvatar";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import { aboveLeftOf, ContextMenu } from '../../structures/ContextMenu';
 import MessageTimestamp from "../messages/MessageTimestamp";
 import SettingsStore from "../../../settings/SettingsStore";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {normalizeWheelEvent} from "../../../utils/Mouse";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { normalizeWheelEvent } from "../../../utils/Mouse";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -95,8 +95,6 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private initX = 0;
     private initY = 0;
-    private lastX = 0;
-    private lastY = 0;
     private previousX = 0;
     private previousY = 0;
 
@@ -105,23 +103,35 @@ export default class ImageView extends React.Component<IProps, IState> {
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
         // We want to recalculate zoom whenever the window's size changes
-        window.addEventListener("resize", this.calculateZoom);
+        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.calculateZoom);
+        this.image.current.addEventListener("load", this.recalculateZoom);
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
-        window.removeEventListener("resize", this.calculateZoom);
-        this.image.current.removeEventListener("load", this.calculateZoom);
+        window.removeEventListener("resize", this.recalculateZoom);
+        this.image.current.removeEventListener("load", this.recalculateZoom);
     }
 
-    private calculateZoom = () => {
+    private recalculateZoom = () => {
+        this.setZoomAndRotation();
+    }
+
+    private setZoomAndRotation = (inputRotation?: number) => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
 
-        const zoomX = imageWrapper.clientWidth / image.naturalWidth;
-        const zoomY = imageWrapper.clientHeight / image.naturalHeight;
+        const rotation = inputRotation || this.state.rotation;
+
+        const imageIsNotFlipped = rotation % 180 === 0;
+
+        // If the image is rotated take it into account
+        const width = imageIsNotFlipped ? image.naturalWidth : image.naturalHeight;
+        const height = imageIsNotFlipped ? image.naturalHeight : image.naturalWidth;
+
+        const zoomX = imageWrapper.clientWidth / width;
+        const zoomY = imageWrapper.clientHeight / height;
 
         // If the image is smaller in both dimensions set its the zoom to 1 to
         // display it in its original size
@@ -130,6 +140,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 zoom: 1,
                 minZoom: 1,
                 maxZoom: 1,
+                rotation: rotation,
             });
             return;
         }
@@ -138,10 +149,14 @@ export default class ImageView extends React.Component<IProps, IState> {
         // image by default
         const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
 
-        if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
+        // If zoom is smaller than minZoom don't go below that value
+        const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
+
         this.setState({
             minZoom: minZoom,
             maxZoom: 1,
+            rotation: rotation,
+            zoom: zoom,
         });
     }
 
@@ -157,7 +172,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             return;
         }
         if (newZoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
@@ -170,7 +185,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         ev.stopPropagation();
         ev.preventDefault();
 
-        const {deltaY} = normalizeWheelEvent(ev);
+        const { deltaY } = normalizeWheelEvent(ev);
         this.zoom(-(deltaY * ZOOM_COEFFICIENT));
     };
 
@@ -192,14 +207,12 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur - 90;
-        this.setState({ rotation: rotationDegrees });
+        this.setZoomAndRotation(cur - 90);
     };
 
     private onRotateClockwiseClick = () => {
         const cur = this.state.rotation;
-        const rotationDegrees = cur + 90;
-        this.setState({ rotation: rotationDegrees });
+        this.setZoomAndRotation(cur + 90);
     };
 
     private onDownloadClick = () => {
@@ -207,6 +220,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         a.href = this.props.src;
         a.download = this.props.name;
         a.target = "_blank";
+        a.rel = "noreferrer noopener";
         a.click();
     };
 
@@ -245,15 +259,15 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({zoom: this.state.maxZoom});
+            this.setState({ zoom: this.state.maxZoom });
             return;
         }
 
-        this.setState({moving: true});
+        this.setState({ moving: true });
         this.previousX = this.state.translationX;
         this.previousY = this.state.translationY;
-        this.initX = ev.pageX - this.lastX;
-        this.initY = ev.pageY - this.lastY;
+        this.initX = ev.pageX - this.state.translationX;
+        this.initY = ev.pageY - this.state.translationY;
     };
 
     private onMoving = (ev: React.MouseEvent) => {
@@ -262,11 +276,9 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         if (!this.state.moving) return;
 
-        this.lastX = ev.pageX - this.initX;
-        this.lastY = ev.pageY - this.initY;
         this.setState({
-            translationX: this.lastX,
-            translationY: this.lastY,
+            translationX: ev.pageX - this.initX,
+            translationY: ev.pageY - this.initY,
         });
     };
 
@@ -282,8 +294,10 @@ export default class ImageView extends React.Component<IProps, IState> {
                 translationX: 0,
                 translationY: 0,
             });
+            this.initX = 0;
+            this.initY = 0;
         }
-        this.setState({moving: false});
+        this.setState({ moving: false });
     };
 
     private renderContextMenu() {
@@ -354,7 +368,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
             const sender = (
                 <div className="mx_ImageView_info_sender">
-                    {senderName}
+                    { senderName }
                 </div>
             );
             const messageTimestamp = (
@@ -381,10 +395,10 @@ export default class ImageView extends React.Component<IProps, IState> {
 
             info = (
                 <div className="mx_ImageView_info_wrapper">
-                    {avatar}
+                    { avatar }
                     <div className="mx_ImageView_info">
-                        {sender}
-                        {messageTimestamp}
+                        { sender }
+                        { messageTimestamp }
                     </div>
                 </div>
             );
@@ -424,7 +438,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 <AccessibleTooltipButton
                     className="mx_ImageView_button mx_ImageView_button_zoomIn"
                     title={_t("Zoom in")}
-                    onClick={ this.onZoomInClick }>
+                    onClick={this.onZoomInClick}>
                 </AccessibleTooltipButton>
             );
         }
@@ -440,37 +454,42 @@ export default class ImageView extends React.Component<IProps, IState> {
                 ref={this.focusLock}
             >
                 <div className="mx_ImageView_panel">
-                    {info}
+                    { info }
                     <div className="mx_ImageView_toolbar">
-                        <AccessibleTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                            title={_t("Rotate Right")}
-                            onClick={this.onRotateClockwiseClick}>
-                        </AccessibleTooltipButton>
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                             title={_t("Rotate Left")}
                             onClick={ this.onRotateCounterClockwiseClick }>
                         </AccessibleTooltipButton>
-                        {zoomOutButton}
-                        {zoomInButton}
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
+                        { zoomOutButton }
+                        { zoomInButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("Download")}
                             onClick={ this.onDownloadClick }>
                         </AccessibleTooltipButton>
-                        {contextMenuButton}
+                        { contextMenuButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("Close")}
                             onClick={ this.props.onFinished }>
                         </AccessibleTooltipButton>
-                        {this.renderContextMenu()}
+                        { this.renderContextMenu() }
                     </div>
                 </div>
                 <div
                     className="mx_ImageView_image_wrapper"
-                    ref={this.imageWrapper}>
+                    ref={this.imageWrapper}
+                    onMouseDown={this.props.onFinished}
+                    onMouseMove={this.onMoving}
+                    onMouseUp={this.onEndMoving}
+                    onMouseLeave={this.onEndMoving}
+                >
                     <img
                         src={this.props.src}
                         title={this.props.name}
@@ -479,9 +498,6 @@ export default class ImageView extends React.Component<IProps, IState> {
                         className="mx_ImageView_image"
                         draggable={true}
                         onMouseDown={this.onStartMoving}
-                        onMouseMove={this.onMoving}
-                        onMouseUp={this.onEndMoving}
-                        onMouseLeave={this.onEndMoving}
                     />
                 </div>
             </FocusLock>

src/components/views/elements/InlineSpinner.tsx

@@ -16,32 +16,31 @@ limitations under the License.
 
 import React from "react";
 import {_t} from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    w?: number;
+    h?: number;
+    children?: React.ReactNode;
+}
+
 @replaceableComponent("views.elements.InlineSpinner")
-export default class InlineSpinner extends React.Component {
+export default class InlineSpinner extends React.PureComponent<IProps> {
+    static defaultProps = {
+        w: 16,
+        h: 16,
+    }
+
     render() {
-        const w = this.props.w || 16;
-        const h = this.props.h || 16;
-        const imgClass = this.props.imgClassName || "";
-
-        let imageSource;
-        if (SettingsStore.getValue('feature_new_spinner')) {
-            imageSource = require("../../../../res/img/spinner.svg");
-        } else {
-            imageSource = require("../../../../res/img/spinner.gif");
-        }
-
         return (
             <div className="mx_InlineSpinner">
-                <img
-                    src={imageSource}
-                    width={w}
-                    height={h}
-                    className={imgClass}
+                <div
+                    className="mx_InlineSpinner_icon mx_Spinner_icon"
+                    style={{width: this.props.w, height: this.props.h}}
                     aria-label={_t("Loading...")}
-                />
+                >
+                    {this.props.children}
+                </div>
             </div>
         );
     }

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,38 +14,33 @@ 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 from "react";
+
 import ToggleSwitch from "./ToggleSwitch";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // The value for the toggle switch
+    value: boolean;
+    // The translated label for the switch
+    label: string;
+    // Whether or not to disable the toggle switch
+    disabled?: boolean;
+    // True to put the toggle in front of the label
+    // Default false.
+    toggleInFront?: boolean;
+    // Additional class names to append to the switch. Optional.
+    className?: string;
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
+
 @replaceableComponent("views.elements.LabelledToggleSwitch")
-export default class LabelledToggleSwitch extends React.Component {
-    static propTypes = {
-        // The value for the toggle switch
-        value: PropTypes.bool.isRequired,
-
-        // The function to call when the value changes
-        onChange: PropTypes.func.isRequired,
-
-        // The translated label for the switch
-        label: PropTypes.string.isRequired,
-
-        // Whether or not to disable the toggle switch
-        disabled: PropTypes.bool,
-
-        // True to put the toggle in front of the label
-        // Default false.
-        toggleInFront: PropTypes.bool,
-
-        // Additional class names to append to the switch. Optional.
-        className: PropTypes.string,
-    };
-
+export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
     render() {
         // This is a minimal version of a SettingsFlag
 
-        let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
+        let firstPart = <span className="mx_SettingsFlag_label">{ this.props.label }</span>;
         let secondPart = <ToggleSwitch
             checked={this.props.value}
             disabled={this.props.disabled}

src/components/views/elements/LanguageDropdown.js

@@ -58,13 +58,8 @@ export default class LanguageDropdown extends React.Component {
             // If no value is given, we start with the first
             // country selected, but our parent component
             // doesn't know this, therefore we do this.
-            const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
-            if (language) {
-                this.props.onOptionChange(language);
-            } else {
-                const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
-                this.props.onOptionChange(language);
-            }
+            const language = languageHandler.getUserLanguage();
+            this.props.onOptionChange(language);
         }
     }
 

src/components/views/elements/MemberEventListSummary.tsx

@@ -24,7 +24,7 @@ import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import { isValid3pidInvite } from "../../../RoomInvite";
 import EventListSummary from "./EventListSummary";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // An array of member events to summarise
@@ -303,7 +303,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
         return res;
     }
 
-    private static getTransitionSequence(events: MatrixEvent[]) {
+    private static getTransitionSequence(events: IUserEvents[]) {
         return events.map(MemberEventListSummary.getTransition);
     }
 
@@ -315,7 +315,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */
-    private static getTransition(e: MatrixEvent): TransitionType {
+    private static getTransition(e: IUserEvents): TransitionType {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
             if (!isValid3pidInvite(e.mxEvent)) {

src/components/views/elements/MiniAvatarUploader.tsx

@@ -19,6 +19,7 @@ import {EventType} from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
+import Spinner from "./Spinner";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useTimeout} from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
@@ -88,6 +89,12 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
         >
             { children }
 
+            <div className="mx_MiniAvatarUploader_indicator">
+                { busy ?
+                    <Spinner w={20} h={20} /> :
+                    <div className="mx_MiniAvatarUploader_cameraIcon"></div> }
+            </div>
+
             <div className={classNames("mx_Tooltip", {
                 "mx_Tooltip_visible": visible,
                 "mx_Tooltip_invisible": !visible,

src/components/views/elements/ReplyThread.js

@@ -46,6 +46,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         layout: LayoutPropType,
+        // Whether to always show a timestamp
+        alwaysShowTimestamps: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -212,9 +214,9 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, alwaysShowTimestamps) {
         if (!ReplyThread.getParentEventId(parentEv)) {
-            return <div className="mx_ReplyThread_wrapper_empty" />;
+            return null;
         }
         return <ReplyThread
             parentEv={parentEv}
@@ -222,6 +224,7 @@ export default class ReplyThread extends React.Component {
             ref={ref}
             permalinkCreator={permalinkCreator}
             layout={layout}
+            alwaysShowTimestamps={alwaysShowTimestamps}
         />;
     }
 
@@ -269,40 +272,32 @@ export default class ReplyThread extends React.Component {
         const {parentEv} = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId
         const ev = await this.getEvent(ReplyThread.getParentEventId(parentEv));
+
         if (this.unmounted) return;
 
         if (ev) {
+            const loadedEv = await this.getNextEvent(ev);
             this.setState({
                 events: [ev],
-            }, this.loadNextEvent);
+                loadedEv,
+                loading: false,
+            });
         } else {
             this.setState({err: true});
         }
     }
 
-    async loadNextEvent() {
-        if (this.unmounted) return;
-        const ev = this.state.events[0];
-        const inReplyToEventId = ReplyThread.getParentEventId(ev);
-
-        if (!inReplyToEventId) {
-            this.setState({
-                loading: false,
-            });
-            return;
-        }
-
-        const loadedEv = await this.getEvent(inReplyToEventId);
-        if (this.unmounted) return;
-
-        if (loadedEv) {
-            this.setState({loadedEv});
-        } else {
-            this.setState({err: true});
+    async getNextEvent(ev) {
+        try {
+            const inReplyToEventId = ReplyThread.getParentEventId(ev);
+            return await this.getEvent(inReplyToEventId);
+        } catch (e) {
+            return null;
         }
     }
 
     async getEvent(eventId) {
+        if (!eventId) return null;
         const event = this.room.findEventById(eventId);
         if (event) return event;
 
@@ -326,13 +321,18 @@ export default class ReplyThread extends React.Component {
         this.initialize();
     }
 
-    onQuoteClick() {
+    async onQuoteClick() {
         const events = [this.state.loadedEv, ...this.state.events];
 
+        let loadedEv = null;
+        if (events.length > 0) {
+            loadedEv = await this.getNextEvent(events[0]);
+        }
+
         this.setState({
-            loadedEv: null,
+            loadedEv,
             events,
-        }, this.loadNextEvent);
+        });
 
         dis.fire(Action.FocusComposer);
     }
@@ -390,8 +390,10 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     layout={this.props.layout}
+                    alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     replacingEventId={ev.replacingEventId()}
+                    as="div"
                 />
             </blockquote>;
         });

src/components/views/elements/RoomAliasField.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,67 +13,78 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
+import React, { createRef } from "react";
+
 import { _t } from '../../../languageHandler';
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import withValidation from './Validation';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Field, { IValidateOpts } from "./Field";
+
+interface IProps {
+    domain: string;
+    value: string;
+    label?: string;
+    placeholder?: string;
+    onChange?(value: string): void;
+}
+
+interface IState {
+    isValid: boolean;
+}
 
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 @replaceableComponent("views.elements.RoomAliasField")
-export default class RoomAliasField extends React.PureComponent {
-    static propTypes = {
-        domain: PropTypes.string.isRequired,
-        onChange: PropTypes.func,
-        value: PropTypes.string.isRequired,
-    };
+export default class RoomAliasField extends React.PureComponent<IProps, IState> {
+    private fieldRef = createRef<Field>();
 
-    constructor(props) {
-        super(props);
-        this.state = {isValid: true};
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            isValid: true,
+        };
     }
 
-    _asFullAlias(localpart) {
+    private asFullAlias(localpart: string): string {
         return `#${localpart}:${this.props.domain}`;
     }
 
     render() {
-        const Field = sdk.getComponent('views.elements.Field');
         const poundSign = (<span>#</span>);
         const aliasPostfix = ":" + this.props.domain;
         const domain = (<span title={aliasPostfix}>{aliasPostfix}</span>);
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
             <Field
-                label={_t("Room address")}
+                label={this.props.label || _t("Room address")}
                 className="mx_RoomAliasField"
                 prefixComponent={poundSign}
                 postfixComponent={domain}
-                ref={ref => this._fieldRef = ref}
-                onValidate={this._onValidate}
-                placeholder={_t("e.g. my-room")}
-                onChange={this._onChange}
+                ref={this.fieldRef}
+                onValidate={this.onValidate}
+                placeholder={this.props.placeholder || _t("e.g. my-room")}
+                onChange={this.onChange}
                 value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
                 maxLength={maxlength}
             />
         );
     }
 
-    _onChange = (ev) => {
+    private onChange = (ev) => {
         if (this.props.onChange) {
-            this.props.onChange(this._asFullAlias(ev.target.value));
+            this.props.onChange(this.asFullAlias(ev.target.value));
         }
     };
 
-    _onValidate = async (fieldState) => {
-        const result = await this._validationRules(fieldState);
+    private onValidate = async (fieldState) => {
+        const result = await this.validationRules(fieldState);
         this.setState({isValid: result.valid});
         return result;
     };
 
-    _validationRules = withValidation({
+    private validationRules = withValidation({
         rules: [
             {
                 key: "safeLocalpart",
@@ -81,7 +92,7 @@ export default class RoomAliasField extends React.PureComponent {
                     if (!value) {
                         return true;
                     }
-                    const fullAlias = this._asFullAlias(value);
+                    const fullAlias = this.asFullAlias(value);
                     // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
                     return !value.includes("#") && !value.includes(":") && !value.includes(",") &&
                         encodeURI(fullAlias) === fullAlias;
@@ -90,7 +101,7 @@ export default class RoomAliasField extends React.PureComponent {
             }, {
                 key: "required",
                 test: async ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Please provide a room address"),
+                invalid: () => _t("Please provide an address"),
             }, {
                 key: "taken",
                 final: true,
@@ -100,7 +111,7 @@ export default class RoomAliasField extends React.PureComponent {
                     }
                     const client = MatrixClientPeg.get();
                     try {
-                        await client.getRoomIdForAlias(this._asFullAlias(value));
+                        await client.getRoomIdForAlias(this.asFullAlias(value));
                         // we got a room id, so the alias is taken
                         return false;
                     } catch (err) {
@@ -116,15 +127,15 @@ export default class RoomAliasField extends React.PureComponent {
         ],
     });
 
-    get isValid() {
+    public get isValid() {
         return this.state.isValid;
     }
 
-    validate(options) {
-        return this._fieldRef.validate(options);
+    public validate(options: IValidateOpts) {
+        return this.fieldRef.current?.validate(options);
     }
 
-    focus() {
-        this._fieldRef.focus();
+    public focus() {
+        this.fieldRef.current?.focus();
     }
 }

src/components/views/elements/RoomName.tsx

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect, useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { useEffect, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 
 interface IProps {
     room: Room;
@@ -34,7 +34,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => {
     }, [room]);
 
     if (children) return children(name);
-    return name || "";
+    return <>{ name || "" }</>;
 };
 
 export default RoomName;

src/components/views/elements/SSOButtons.tsx

@@ -112,7 +112,7 @@ interface IProps {
 const MAX_PER_ROW = 6;
 
 const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
-    const providers = flow["org.matrix.msc2858.identity_providers"] || [];
+    const providers = flow.identity_providers || [];
     if (providers.length < 2) {
         return <div className="mx_SSOButtons">
             <SSOButton

src/components/views/elements/SettingsFlag.tsx

@@ -77,9 +77,10 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
-        let label = this.props.label;
-        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
-        else label = _t(label);
+        const label = this.props.label
+            ? _t(this.props.label)
+            : SettingsStore.getDisplayName(this.props.name, this.props.level);
+        const description = SettingsStore.getDescription(this.props.name);
 
         if (this.props.useCheckbox) {
             return <StyledCheckbox
@@ -99,6 +100,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         disabled={this.props.disabled || !canChange}
                         aria-label={label}
                     />
+                    { description && <div className="mx_SettingsFlag_microcopy">
+                        { description }
+                    </div> }
                 </div>
             );
         }