Merge remote-tracking branch 'upstream/develop' into fix/end-of-line-emoji

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/audio_messages/AudioPlayer.tsx

@@ -0,0 +1,93 @@
+/*
+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, { createRef, ReactNode, RefObject } from "react";
+import PlayPauseButton from "./PlayPauseButton";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { formatBytes } from "../../../utils/FormattingUtils";
+import DurationClock from "./DurationClock";
+import { Key } from "../../../Keyboard";
+import { _t } from "../../../languageHandler";
+import SeekBar from "./SeekBar";
+import PlaybackClock from "./PlaybackClock";
+import AudioPlayerBase from "./AudioPlayerBase";
+
+@replaceableComponent("views.audio_messages.AudioPlayer")
+export default class AudioPlayer extends AudioPlayerBase {
+    private playPauseRef: RefObject<PlayPauseButton> = createRef();
+    private seekRef: RefObject<SeekBar> = createRef();
+
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        // stopPropagation() prevents the FocusComposer catch-all from triggering,
+        // but we need to do it on key down instead of press (even though the user
+        // interaction is typically on press).
+        if (ev.key === Key.SPACE) {
+            ev.stopPropagation();
+            this.playPauseRef.current?.toggleState();
+        } else if (ev.key === Key.ARROW_LEFT) {
+            ev.stopPropagation();
+            this.seekRef.current?.left();
+        } else if (ev.key === Key.ARROW_RIGHT) {
+            ev.stopPropagation();
+            this.seekRef.current?.right();
+        }
+    };
+
+    protected renderFileSize(): string {
+        const bytes = this.props.playback.sizeBytes;
+        if (!bytes) return null;
+
+        // Not translated here - we're just presenting the data which should already
+        // be translated if needed.
+        return `(${formatBytes(bytes)})`;
+    }
+
+    protected renderComponent(): ReactNode {
+        // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
+        // events for accessibility
+        return (
+            <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyDown={this.onKeyDown}>
+                <div className='mx_AudioPlayer_primaryContainer'>
+                    <PlayPauseButton
+                        playback={this.props.playback}
+                        playbackPhase={this.state.playbackPhase}
+                        tabIndex={-1} // prevent tabbing into the button
+                        ref={this.playPauseRef}
+                    />
+                    <div className='mx_AudioPlayer_mediaInfo'>
+                        <span className='mx_AudioPlayer_mediaName'>
+                            { this.props.mediaName || _t("Unnamed audio") }
+                        </span>
+                        <div className='mx_AudioPlayer_byline'>
+                            <DurationClock playback={this.props.playback} />
+                            &nbsp; { /* easiest way to introduce a gap between the components */ }
+                            { this.renderFileSize() }
+                        </div>
+                    </div>
+                </div>
+                <div className='mx_AudioPlayer_seek'>
+                    <SeekBar
+                        playback={this.props.playback}
+                        tabIndex={-1} // prevent tabbing into the bar
+                        playbackPhase={this.state.playbackPhase}
+                        ref={this.seekRef}
+                    />
+                    <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
+                </div>
+            </div>
+        );
+    }
+}

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -0,0 +1,70 @@
+/*
+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 { Playback, PlaybackState } from "../../../audio/Playback";
+import { TileShape } from "../rooms/EventTile";
+import React, { ReactNode } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+
+    mediaName?: string;
+    tileShape?: TileShape;
+}
+
+interface IState {
+    playbackPhase: PlaybackState;
+    error?: boolean;
+}
+
+@replaceableComponent("views.audio_messages.AudioPlayerBase")
+export default abstract class AudioPlayerBase extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            playbackPhase: PlaybackState.Decoding, // default assumption
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+
+        // Don't wait for the promise to complete - it will emit a progress update when it
+        // is done, and it's not meant to take long anyhow.
+        this.props.playback.prepare().catch(e => {
+            console.error("Error processing audio file:", e);
+            this.setState({ error: true });
+        });
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        this.setState({ playbackPhase: ev });
+    };
+
+    protected abstract renderComponent(): ReactNode;
+
+    public render(): ReactNode {
+        return <>
+            { this.renderComponent() }
+            { this.state.error && <div className="text-warning">{ _t("Error downloading audio") }</div> }
+        </>;
+    }
+}

src/components/views/audio_messages/Clock.tsx

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

src/components/views/audio_messages/DurationClock.tsx

@@ -0,0 +1,55 @@
+/*
+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 { replaceableComponent } from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import { Playback } from "../../../audio/Playback";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    durationSeconds: number;
+}
+
+/**
+ * A clock which shows a clip's maximum duration.
+ */
+@replaceableComponent("views.audio_messages.DurationClock")
+export default class DurationClock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            // we track the duration on state because we won't really know what the clip duration
+            // is until the first time update, and as a PureComponent we are trying to dedupe state
+            // updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
+            // member property to track "did we get a duration".
+            durationSeconds: this.props.playback.clockInfo.durationSeconds,
+        };
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private onTimeUpdate = (time: number[]) => {
+        this.setState({ durationSeconds: time[1] });
+    };
+
+    public render() {
+        return <Clock seconds={this.state.durationSeconds} />;
+    }
+}

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -0,0 +1,65 @@
+/*
+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 { IRecordingUpdate, VoiceRecording } from "../../../audio/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+
+interface IProps {
+    recorder: VoiceRecording;
+}
+
+interface IState {
+    seconds: number;
+}
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.audio_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
+    private seconds = 0;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            seconds: 0,
+        };
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            this.seconds = update.timeSeconds;
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private updateClock() {
+        this.setState({
+            seconds: this.seconds,
+        });
+    }
+
+    public render() {
+        return <Clock seconds={this.state.seconds} />;
+    }
+}

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -0,0 +1,69 @@
+/*
+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 { IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording } from "../../../audio/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arrayFastResample, arraySeed } from "../../../utils/arrays";
+import Waveform from "./Waveform";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+
+interface IProps {
+    recorder: VoiceRecording;
+}
+
+interface IState {
+    waveform: number[];
+}
+
+/**
+ * A waveform which shows the waveform of a live recording
+ */
+@replaceableComponent("views.audio_messages.LiveRecordingWaveform")
+export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
+    public static defaultProps = {
+        progress: 1,
+    };
+
+    private waveform: number[] = [];
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateWaveform(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            waveform: arraySeed(0, RECORDING_PLAYBACK_SAMPLES),
+        };
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            // The incoming data is between zero and one, so we don't need to clamp/rescale it.
+            this.waveform = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private updateWaveform() {
+        this.setState({ waveform: this.waveform });
+    }
+
+    public render() {
+        return <Waveform relHeights={this.state.waveform} />;
+    }
+}

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -0,0 +1,69 @@
+/*
+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, { ReactNode } from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { _t } from "../../../languageHandler";
+import { Playback, PlaybackState } from "../../../audio/Playback";
+import classNames from "classnames";
+
+// omitted props are handled by render function
+interface IProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick" | "disabled"> {
+    // Playback instance to manipulate. Cannot change during the component lifecycle.
+    playback: Playback;
+
+    // The playback phase to render. Able to change during the component lifecycle.
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * Displays a play/pause button (activating the play/pause function of the recorder)
+ * to be displayed in reference to a recording.
+ */
+@replaceableComponent("views.audio_messages.PlayPauseButton")
+export default class PlayPauseButton extends React.PureComponent<IProps> {
+    public constructor(props) {
+        super(props);
+    }
+
+    private onClick = () => {
+        // noinspection JSIgnoredPromiseFromCall
+        this.toggleState();
+    };
+
+    public async toggleState() {
+        await this.props.playback.toggle();
+    }
+
+    public render(): ReactNode {
+        const { playback, playbackPhase, ...restProps } = this.props;
+        const isPlaying = playback.isPlaying;
+        const isDisabled = playbackPhase === PlaybackState.Decoding;
+        const classes = classNames('mx_PlayPauseButton', {
+            'mx_PlayPauseButton_play': !isPlaying,
+            'mx_PlayPauseButton_pause': isPlaying,
+            'mx_PlayPauseButton_disabled': isDisabled,
+        });
+        return <AccessibleTooltipButton
+            className={classes}
+            title={isPlaying ? _t("Pause") : _t("Play")}
+            onClick={this.onClick}
+            disabled={isDisabled}
+            {...restProps}
+        />;
+    }
+}

src/components/views/audio_messages/PlaybackClock.tsx

@@ -0,0 +1,80 @@
+/*
+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 { replaceableComponent } from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import { Playback, PlaybackState } from "../../../audio/Playback";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+
+interface IProps {
+    playback: Playback;
+
+    // The default number of seconds to show when the playback has completed or
+    // has not started. Not used during playback, even when paused. Defaults to
+    // clip duration length.
+    defaultDisplaySeconds?: number;
+}
+
+interface IState {
+    seconds: number;
+    durationSeconds: number;
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * A clock for a playback of a recording.
+ */
+@replaceableComponent("views.audio_messages.PlaybackClock")
+export default class PlaybackClock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            seconds: this.props.playback.clockInfo.timeSeconds,
+            // we track the duration on state because we won't really know what the clip duration
+            // is until the first time update, and as a PureComponent we are trying to dedupe state
+            // updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
+            // member property to track "did we get a duration".
+            durationSeconds: this.props.playback.clockInfo.durationSeconds,
+            playbackPhase: PlaybackState.Stopped, // assume not started, so full clock
+        };
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        // Convert Decoding -> Stopped because we don't care about the distinction here
+        if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
+        this.setState({ playbackPhase: ev });
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        this.setState({ seconds: time[0], durationSeconds: time[1] });
+    };
+
+    public render() {
+        let seconds = this.state.seconds;
+        if (this.state.playbackPhase === PlaybackState.Stopped) {
+            if (Number.isFinite(this.props.defaultDisplaySeconds)) {
+                seconds = this.props.defaultDisplaySeconds;
+            } else {
+                seconds = this.state.durationSeconds;
+            }
+        }
+        return <Clock seconds={seconds} />;
+    }
+}

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -0,0 +1,68 @@
+/*
+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 { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
+import Waveform from "./Waveform";
+import { Playback, PLAYBACK_WAVEFORM_SAMPLES } from "../../../audio/Playback";
+import { percentageOf } from "../../../utils/numbers";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    heights: number[];
+    progress: number;
+}
+
+/**
+ * A waveform which shows the waveform of a previously recorded recording
+ */
+@replaceableComponent("views.audio_messages.PlaybackWaveform")
+export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            heights: this.toHeights(this.props.playback.waveform),
+            progress: 0, // default no progress
+        };
+
+        this.props.playback.waveformData.onUpdate(this.onWaveformUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private toHeights(waveform: number[]) {
+        const seed = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
+        return arrayTrimFill(waveform, PLAYBACK_WAVEFORM_SAMPLES, seed);
+    }
+
+    private onWaveformUpdate = (waveform: number[]) => {
+        this.setState({ heights: this.toHeights(waveform) });
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        // Track percentages to a general precision to avoid over-waking the component.
+        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(3));
+        this.setState({ progress });
+    };
+
+    public render() {
+        return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
+    }
+}

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -0,0 +1,43 @@
+/*
+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, { ReactNode } from "react";
+import PlayPauseButton from "./PlayPauseButton";
+import PlaybackClock from "./PlaybackClock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "../rooms/EventTile";
+import PlaybackWaveform from "./PlaybackWaveform";
+import AudioPlayerBase from "./AudioPlayerBase";
+
+@replaceableComponent("views.audio_messages.RecordingPlayback")
+export default class RecordingPlayback extends AudioPlayerBase {
+    private get isWaveformable(): boolean {
+        return this.props.tileShape !== TileShape.Notif
+            && this.props.tileShape !== TileShape.FileGrid
+            && this.props.tileShape !== TileShape.Pinned;
+    }
+
+    protected renderComponent(): ReactNode {
+        const shapeClass = !this.isWaveformable ? 'mx_VoiceMessagePrimaryContainer_noWaveform' : '';
+        return (
+            <div className={'mx_MediaBody mx_VoiceMessagePrimaryContainer ' + shapeClass}>
+                <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
+                <PlaybackClock playback={this.props.playback} />
+                { this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> }
+            </div>
+        );
+    }
+}

src/components/views/audio_messages/SeekBar.tsx

@@ -0,0 +1,112 @@
+/*
+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 { Playback, PlaybackState } from "../../../audio/Playback";
+import React, { ChangeEvent, CSSProperties, ReactNode } from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+import { percentageOf } from "../../../utils/numbers";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+
+    // Tab index for the underlying component. Useful if the seek bar is in a managed state.
+    // Defaults to zero.
+    tabIndex?: number;
+
+    playbackPhase: PlaybackState;
+}
+
+interface IState {
+    percentage: number;
+}
+
+interface ISeekCSS extends CSSProperties {
+    '--fillTo': number;
+}
+
+const ARROW_SKIP_SECONDS = 5; // arbitrary
+
+@replaceableComponent("views.audio_messages.SeekBar")
+export default class SeekBar extends React.PureComponent<IProps, IState> {
+    // We use an animation frame request to avoid overly spamming prop updates, even if we aren't
+    // really using anything demanding on the CSS front.
+
+    private animationFrameFn = new MarkedExecution(
+        () => this.doUpdate(),
+        () => requestAnimationFrame(() => this.animationFrameFn.trigger()));
+
+    public static defaultProps = {
+        tabIndex: 0,
+    };
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            percentage: 0,
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.clockInfo.liveData.onUpdate(() => this.animationFrameFn.mark());
+    }
+
+    private doUpdate() {
+        this.setState({
+            percentage: percentageOf(
+                this.props.playback.clockInfo.timeSeconds,
+                0,
+                this.props.playback.clockInfo.durationSeconds),
+        });
+    }
+
+    public left() {
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds - ARROW_SKIP_SECONDS);
+    }
+
+    public right() {
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds + ARROW_SKIP_SECONDS);
+    }
+
+    private onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        // Thankfully, onChange is only called when the user changes the value, not when we
+        // change the value on the component. We can use this as a reliable "skip to X" function.
+        //
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.clockInfo.durationSeconds);
+    };
+
+    public render(): ReactNode {
+        // We use a range input to avoid having to re-invent accessibility handling on
+        // a custom set of divs.
+        return <input
+            type="range"
+            className='mx_SeekBar'
+            tabIndex={this.props.tabIndex}
+            onChange={this.onChange}
+            min={0}
+            max={1}
+            value={this.state.percentage}
+            step={0.001}
+            style={{ '--fillTo': this.state.percentage } as ISeekCSS}
+            disabled={this.props.playbackPhase === PlaybackState.Decoding}
+        />;
+    }
+}

src/components/views/audio_messages/Waveform.tsx

@@ -0,0 +1,67 @@
+/*
+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 { replaceableComponent } from "../../../utils/replaceableComponent";
+import classNames from "classnames";
+import { CSSProperties } from "react";
+
+interface WaveformCSSProperties extends CSSProperties {
+    '--barHeight': number;
+}
+
+interface IProps {
+    relHeights: number[]; // relative heights (0-1)
+    progress: number; // percent complete, 0-1, default 100%
+}
+
+interface IState {
+}
+
+/**
+ * A simple waveform component. This renders bars (centered vertically) for each
+ * height provided in the component properties. Updating the properties will update
+ * the rendered waveform.
+ *
+ * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
+ * "filled", as a demonstration of the progress property.
+ */
+@replaceableComponent("views.audio_messages.Waveform")
+export default class Waveform extends React.PureComponent<IProps, IState> {
+    public static defaultProps = {
+        progress: 1,
+    };
+
+    public render() {
+        return <div className='mx_Waveform'>
+            { this.props.relHeights.map((h, i) => {
+                const progress = this.props.progress;
+                const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
+                const classes = classNames({
+                    'mx_Waveform_bar': true,
+                    'mx_Waveform_bar_100pct': isCompleteBar,
+                });
+                return <span
+                    key={i}
+                    style={{
+                        "--barHeight": h,
+                    } as WaveformCSSProperties}
+                    className={classes}
+                />;
+            }) }
+        </div>;
+    }
+}

src/components/views/auth/AuthBody.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthBody")
 export default class AuthBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthBody">
             { this.props.children }
         </div>;

src/components/views/auth/AuthFooter.tsx

@@ -18,11 +18,11 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthFooter")
 export default class AuthFooter extends React.Component {
-    render() {
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthFooter">
                 <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>

src/components/views/auth/AuthHeader.tsx

@@ -16,20 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthHeaderLogo from "./AuthHeaderLogo";
+import LanguageSelector from "./LanguageSelector";
+
+interface IProps {
+    disableLanguageSelector?: boolean;
+}
 
 @replaceableComponent("views.auth.AuthHeader")
-export default class AuthHeader extends React.Component {
-    static propTypes = {
-        disableLanguageSelector: PropTypes.bool,
-    };
-
-    render() {
-        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
-        const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
-
+export default class AuthHeader extends React.Component<IProps> {
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />

src/components/views/auth/AuthHeaderLogo.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthHeaderLogo")
 export default class AuthHeaderLogo extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_AuthHeaderLogo">
             Matrix
         </div>;

src/components/views/auth/AuthPage.tsx

@@ -17,18 +17,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AuthFooter from "./AuthFooter";
 
 @replaceableComponent("views.auth.AuthPage")
 export default class AuthPage extends React.PureComponent {
-    render() {
-        const AuthFooter = sdk.getComponent('auth.AuthFooter');
-
+    public render(): React.ReactNode {
         return (
             <div className="mx_AuthPage">
                 <div className="mx_AuthPage_modal">
-                    {this.props.children}
+                    { this.props.children }
                 </div>
                 <AuthFooter />
             </div>

src/components/views/auth/CaptchaForm.tsx

@@ -14,67 +14,75 @@ 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 React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
+interface ICaptchaFormProps {
+    sitePublicKey: string;
+    onCaptchaResponse: (response: string) => void;
+}
+
+interface ICaptchaFormState {
+    errorText?: string;
+
+}
+
 /**
  * A pure UI component which displays a captcha form.
  */
 @replaceableComponent("views.auth.CaptchaForm")
-export default class CaptchaForm extends React.Component {
-    static propTypes = {
-        sitePublicKey: PropTypes.string,
-
-        // called with the captcha response
-        onCaptchaResponse: PropTypes.func,
-    };
-
+export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICaptchaFormState> {
     static defaultProps = {
         onCaptchaResponse: () => {},
     };
 
-    constructor(props) {
+    private captchaWidgetId?: string;
+    private recaptchaContainer = createRef<HTMLDivElement>();
+
+    constructor(props: ICaptchaFormProps) {
         super(props);
 
         this.state = {
-            errorText: null,
+            errorText: undefined,
         };
 
-        this._captchaWidgetId = null;
-
-        this._recaptchaContainer = createRef();
-
         CountlyAnalytics.instance.track("onboarding_grecaptcha_begin");
     }
 
     componentDidMount() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
-        if (global.grecaptcha) {
+        if (this.isRecaptchaReady()) {
             // already loaded
-            this._onCaptchaLoaded();
+            this.onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
+            window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); };
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
-                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`,
             );
-            this._recaptchaContainer.current.appendChild(scriptTag);
+            this.recaptchaContainer.current.appendChild(scriptTag);
         }
     }
 
     componentWillUnmount() {
-        this._resetRecaptcha();
+        this.resetRecaptcha();
     }
 
-    _renderRecaptcha(divId) {
-        if (!global.grecaptcha) {
+    // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba
+    private isRecaptchaReady(): boolean {
+        return typeof window !== "undefined" &&
+            typeof global.grecaptcha !== "undefined" &&
+            typeof global.grecaptcha.render === 'function';
+    }
+
+    private renderRecaptcha(divId: string) {
+        if (!this.isRecaptchaReady()) {
             console.error("grecaptcha not loaded!");
             throw new Error("Recaptcha did not load successfully");
         }
@@ -84,26 +92,26 @@ export default class CaptchaForm extends React.Component {
             console.error("No public key for recaptcha!");
             throw new Error(
                 "This server has not supplied enough information for Recaptcha "
-                    + "authentication");
+                + "authentication");
         }
 
         console.info("Rendering to %s", divId);
-        this._captchaWidgetId = global.grecaptcha.render(divId, {
+        this.captchaWidgetId = global.grecaptcha.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
     }
 
-    _resetRecaptcha() {
-        if (this._captchaWidgetId !== null) {
-            global.grecaptcha.reset(this._captchaWidgetId);
+    private resetRecaptcha() {
+        if (this.captchaWidgetId) {
+            global?.grecaptcha?.reset(this.captchaWidgetId);
         }
     }
 
-    _onCaptchaLoaded() {
+    private onCaptchaLoaded() {
         console.log("Loaded recaptcha script.");
         try {
-            this._renderRecaptcha(DIV_ID);
+            this.renderRecaptcha(DIV_ID);
             // clear error if re-rendered
             this.setState({
                 errorText: null,
@@ -128,10 +136,10 @@ export default class CaptchaForm extends React.Component {
         }
 
         return (
-            <div ref={this._recaptchaContainer}>
-                <p>{_t(
+            <div ref={this.recaptchaContainer}>
+                <p>{ _t(
                     "This homeserver would like to make sure you are not a robot.",
-                )}</p>
+                ) }</p>
                 <div id={DIV_ID} />
                 { error }
             </div>

src/components/views/auth/CompleteSecurityBody.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.CompleteSecurityBody")
 export default class CompleteSecurityBody extends React.PureComponent {
-    render() {
+    public render(): React.ReactNode {
         return <div className="mx_CompleteSecurityBody">
             { this.props.children }
         </div>;

src/components/views/auth/CountryDropdown.tsx

@@ -15,21 +15,19 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
-
-import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
+import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Dropdown from "../elements/Dropdown";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }
 
-function countryMatchesSearchQuery(query, country) {
+function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean {
     // Remove '+' if present (when searching for a prefix)
     if (query[0] === '+') {
         query = query.slice(1);
@@ -41,15 +39,26 @@ function countryMatchesSearchQuery(query, country) {
     return false;
 }
 
-@replaceableComponent("views.auth.CountryDropdown")
-export default class CountryDropdown extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onSearchChange = this._onSearchChange.bind(this);
-        this._onOptionChange = this._onOptionChange.bind(this);
-        this._getShortOption = this._getShortOption.bind(this);
+interface IProps {
+    value?: string;
+    onOptionChange: (country: PhoneNumberCountryDefinition) => void;
+    isSmall: boolean; // if isSmall, show +44 in the selected value
+    showPrefix: boolean;
+    className?: string;
+    disabled?: boolean;
+}
 
-        let defaultCountry = COUNTRIES[0];
+interface IState {
+    searchQuery: string;
+    defaultCountry: PhoneNumberCountryDefinition;
+}
+
+@replaceableComponent("views.auth.CountryDropdown")
+export default class CountryDropdown extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        let defaultCountry: PhoneNumberCountryDefinition = COUNTRIES[0];
         const defaultCountryCode = SdkConfig.get()["defaultCountryCode"];
         if (defaultCountryCode) {
             const country = COUNTRIES.find(c => c.iso2 === defaultCountryCode.toUpperCase());
@@ -62,7 +71,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component
@@ -71,21 +80,21 @@ export default class CountryDropdown extends React.Component {
         }
     }
 
-    _onSearchChange(search) {
+    private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
         });
-    }
+    };
 
-    _onOptionChange(iso2) {
+    private onOptionChange = (iso2: string): void => {
         this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
-    }
+    };
 
-    _flagImgForIso2(iso2) {
+    private flagImgForIso2(iso2: string): React.ReactNode {
         return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
-    _getShortOption(iso2) {
+    private getShortOption = (iso2: string): React.ReactNode => {
         if (!this.props.isSmall) {
             return undefined;
         }
@@ -94,14 +103,12 @@ export default class CountryDropdown extends React.Component {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
         return <span className="mx_CountryDropdown_shortOption">
-            { this._flagImgForIso2(iso2) }
+            { this.flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
-    }
-
-    render() {
-        const Dropdown = sdk.getComponent('elements.Dropdown');
+    };
 
+    public render(): React.ReactNode {
         let displayedCountries;
         if (this.state.searchQuery) {
             displayedCountries = COUNTRIES.filter(
@@ -124,7 +131,7 @@ export default class CountryDropdown extends React.Component {
 
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
-                { this._flagImgForIso2(country.iso2) }
+                { this.flagImgForIso2(country.iso2) }
                 { _t(country.name) } (+{ country.prefix })
             </div>;
         });
@@ -136,10 +143,10 @@ export default class CountryDropdown extends React.Component {
         return <Dropdown
             id="mx_CountryDropdown"
             className={this.props.className + " mx_CountryDropdown"}
-            onOptionChange={this._onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onOptionChange={this.onOptionChange}
+            onSearchChange={this.onSearchChange}
             menuWidth={298}
-            getShortOption={this._getShortOption}
+            getShortOption={this.getShortOption}
             value={value}
             searchEnabled={true}
             disabled={this.props.disabled}
@@ -149,13 +156,3 @@ export default class CountryDropdown extends React.Component {
         </Dropdown>;
     }
 }
-
-CountryDropdown.propTypes = {
-    className: PropTypes.string,
-    isSmall: PropTypes.bool,
-    // if isSmall, show +44 in the selected value
-    showPrefix: PropTypes.bool,
-    onOptionChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-    disabled: PropTypes.bool,
-};

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,17 +14,20 @@ 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 { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { LocalisedPolicy, Policies } from '../../../Terms';
+import Field from '../elements/Field';
+import CaptchaForm from "./CaptchaForm";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -41,7 +42,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  *                         one HS whilst beign a guest on another).
  * loginType:              the login type of the auth stage being attempted
  * authSessionId:          session id from the server
- * clientSecret:           The client secret in use for ID server auth sessions
+ * clientSecret:           The client secret in use for identity server auth sessions
  * stageParams:            params from the server for the stage being attempted
  * errorText:              error message from a previous attempt to authenticate
  * submitAuthDict:         a function which will be called with the new auth dict
@@ -54,8 +55,8 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  *                         Defined keys for stages are:
  *                             m.login.email.identity:
  *                              * emailSid: string representing the sid of the active
- *                                          verification session from the ID server, or
- *                                          null if no session is active.
+ *                                          verification session from the identity server,
+ *                                          or null if no session is active.
  * fail:                   a function which should be called with an error object if an
  *                         error occurred during the auth stage. This will cause the auth
  *                         session to be failed and the process to go back to the start.
@@ -76,34 +77,43 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 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 +125,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,14 +133,13 @@ export class PasswordAuthEntry extends React.Component {
     };
 
     render() {
-        const passwordBoxClass = classnames({
+        const passwordBoxClass = classNames({
             "error": this.props.errorText,
         });
 
         let submitButtonOrSpinner;
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            submitButtonOrSpinner = <Loader />;
+            submitButtonOrSpinner = <Spinner />;
         } else {
             submitButtonOrSpinner = (
                 <input type="submit"
@@ -150,12 +159,10 @@ export class PasswordAuthEntry extends React.Component {
             );
         }
 
-        const Field = sdk.getComponent('elements.Field');
-
         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,51 +170,49 @@ 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 }
                     </div>
                 </form>
-            { errorSection }
+                { errorSection }
             </div>
         );
     }
 }
 
-@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,
         });
     };
 
     render() {
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         }
 
         let errorText = this.props.errorText;
 
-        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         let sitePublicKey;
         if (!this.props.stageParams || !this.props.stageParams.public_key) {
             errorText = _t(
@@ -230,7 +235,7 @@ export class RecaptchaAuthEntry extends React.Component {
         return (
             <div>
                 <CaptchaForm sitePublicKey={sitePublicKey}
-                    onCaptchaResponse={this._onCaptchaResponse}
+                    onCaptchaResponse={this.onCaptchaResponse}
                 />
                 { errorSection }
             </div>
@@ -238,18 +243,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 +309,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 = {
@@ -306,16 +324,15 @@ export class TermsAuthEntry extends React.Component {
         CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
-
     componentDidMount() {
         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];
@@ -323,10 +340,10 @@ export class TermsAuthEntry extends React.Component {
 
             newToggles[policy.id] = checked;
         }
-        this.setState({"toggledPolicies": newToggles});
+        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,17 +351,16 @@ 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")});
+            this.setState({ errorText: _t("Please review and accept all of the homeserver's policies") });
         }
     };
 
     render() {
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         }
 
         const checkboxes = [];
@@ -356,7 +372,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>,
             );
@@ -374,13 +390,15 @@ export class TermsAuthEntry extends React.Component {
         let submitButton;
         if (this.props.showContinue !== false) {
             // XXX: button classes
-            submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                                   onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+            submitButton = <button
+                className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
+                onClick={this.trySubmit}
+                disabled={!allChecked}>{ _t("Accept") }</button>;
         }
 
         return (
             <div>
-                <p>{_t("Please review and accept the policies of this homeserver:")}</p>
+                <p>{ _t("Please review and accept the policies of this homeserver:") }</p>
                 { checkboxes }
                 { errorSection }
                 { submitButton }
@@ -389,21 +407,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 +442,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,66 +452,73 @@ 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.setState({ requestingToken: true });
+        this.requestMsisdnToken().catch((e) => {
             this.props.fail(e);
         }).finally(() => {
-            this.setState({requestingToken: false});
+            this.setState({ requestingToken: false });
         });
     }
 
     /*
      * 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 +528,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
@@ -539,11 +561,10 @@ export class MsisdnAuthEntry extends React.Component {
 
     render() {
         if (this.state.requestingToken) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return <Loader />;
+            return <Spinner />;
         } else {
             const enableSubmit = Boolean(this.state.token);
-            const submitClasses = classnames({
+            const submitClasses = classNames({
                 mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
                 mx_GeneralButton: true,
             });
@@ -558,25 +579,27 @@ 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}
-                                aria-label={ _t("Code")}
+                                onChange={this.onTokenChange}
+                                aria-label={_t("Code")}
                             />
                             <br />
-                            <input type="submit" value={_t("Submit")}
+                            <input
+                                type="submit"
+                                value={_t("Submit")}
                                 className={submitClasses}
                                 disabled={!enableSubmit}
                             />
                         </form>
-                        {errorSection}
+                        { errorSection }
                     </div>
                 </div>
             );
@@ -584,40 +607,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 +648,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.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
+        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({});
     };
 
@@ -672,21 +695,21 @@ export class SSOAuthEntry extends React.Component {
             <AccessibleButton
                 onClick={this.props.onCancel}
                 kind={this.props.continueKind ? (this.props.continueKind + '_outline') : 'primary_outline'}
-            >{_t("Cancel")}</AccessibleButton>
+            >{ _t("Cancel") }</AccessibleButton>
         );
         if (this.state.phase === SSOAuthEntry.PHASE_PREAUTH) {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onStartAuthClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Single Sign On")}</AccessibleButton>
+                >{ this.props.continueText || _t("Single Sign On") }</AccessibleButton>
             );
         } else {
             continueButton = (
                 <AccessibleButton
                     onClick={this.onConfirmClick}
                     kind={this.props.continueKind || 'primary'}
-                >{this.props.continueText || _t("Confirm")}</AccessibleButton>
+                >{ this.props.continueText || _t("Confirm") }</AccessibleButton>
             );
         }
 
@@ -708,54 +731,45 @@ export class SSOAuthEntry extends React.Component {
         return <React.Fragment>
             { errorSection }
             <div className="mx_InteractiveAuthEntryComponents_sso_buttons">
-                {cancelButton}
-                {continueButton}
+                { cancelButton }
+                { continueButton }
             </div>
         </React.Fragment>;
     }
 }
 
 @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 +777,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 +800,50 @@ export class FallbackAuthEntry extends React.Component {
         }
         return (
             <div>
-                <a href="" ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
-                {errorSection}
+                <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;
-        }
-    }
-    return FallbackAuthEntry;
+export interface IStageComponentProps extends IAuthEntryProps {
+    clientSecret?: string;
+    stageParams?: Record<string, any>;
+    inputs?: IInputs;
+    stageState?: IStageStatus;
+    showContinue?: boolean;
+    continueText?: string;
+    continueKind?: string;
+    fail?(e: Error): void;
+    setEmailSid?(sid: string): void;
+    onCancel?(): void;
+}
+
+export interface IStageComponent extends React.ComponentClass<React.PropsWithRef<IStageComponentProps>> {
+    tryContinue?(): void;
+    attemptFailed?(): void;
+    focus?(): void;
+}
+
+export default function getEntryComponentForLoginType(loginType: AuthType): IStageComponent {
+    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;
+    }
 }

src/components/views/auth/LanguageSelector.tsx

@@ -15,24 +15,26 @@ limitations under the License.
 */
 
 import SdkConfig from "../../../SdkConfig";
-import {getCurrentLanguage} from "../../../languageHandler";
+import { getCurrentLanguage } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import PlatformPeg from "../../../PlatformPeg";
-import * as sdk from '../../../index';
 import React from 'react';
-import {SettingLevel} from "../../../settings/SettingLevel";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import LanguageDropdown from "../elements/LanguageDropdown";
 
-function onChange(newLang) {
+function onChange(newLang: string): void {
     if (getCurrentLanguage() !== newLang) {
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
         PlatformPeg.get().reload();
     }
 }
 
-export default function LanguageSelector({disabled}) {
-    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+interface IProps {
+    disabled?: boolean;
+}
 
-    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+export default function LanguageSelector({ disabled }: IProps): JSX.Element {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
     return <LanguageDropdown
         className="mx_AuthBody_language"
         onOptionChange={onChange}

src/components/views/auth/PassphraseField.tsx

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {PureComponent, RefCallback, RefObject} from "react";
+import React, { PureComponent, RefCallback, RefObject } from "react";
 import classNames from "classnames";
 import zxcvbn from "zxcvbn";
 
 import SdkConfig from "../../../SdkConfig";
-import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
-import {_t, _td} from "../../../languageHandler";
-import Field, {IInputProps} from "../elements/Field";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import { _t, _td } from "../../../languageHandler";
+import Field, { IInputProps } from "../elements/Field";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends Omit<IInputProps, "onValidate"> {
     autoFocus?: boolean;

src/components/views/auth/PasswordLogin.tsx

@@ -19,14 +19,14 @@ import classNames from 'classnames';
 
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import AccessibleButton from "../elements/AccessibleButton";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import withValidation from "../elements/Validation";
 import * as Email from "../../../email";
 import Field from "../elements/Field";
 import CountryDropdown from "./CountryDropdown";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -52,8 +52,8 @@ interface IProps {
 
 interface IState {
     fieldValid: Partial<Record<LoginField, boolean>>;
-    loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone,
-    password: "",
+    loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
+    password: "";
 }
 
 enum LoginField {
@@ -166,7 +166,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     };
 
     private onPasswordChanged = ev => {
-        this.setState({password: ev.target.value});
+        this.setState({ password: ev.target.value });
     };
 
     private async verifyFieldsBeforeSubmit() {
@@ -322,7 +322,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         const result = await this.validatePasswordRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
-    }
+    };
 
     private renderLoginField(loginType: IState["loginType"], autoFocus: boolean) {
         const classes = {
@@ -416,7 +416,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                 kind="link"
                 onClick={this.onForgotPasswordClick}
             >
-                {_t("Forgot password?")}
+                { _t("Forgot password?") }
             </AccessibleButton>;
         }
 
@@ -441,16 +441,16 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.disableSubmit}
                     >
                         <option key={LoginField.MatrixId} value={LoginField.MatrixId}>
-                            {_t('Username')}
+                            { _t('Username') }
                         </option>
                         <option
                             key={LoginField.Email}
                             value={LoginField.Email}
                         >
-                            {_t('Email address')}
+                            { _t('Email address') }
                         </option>
                         <option key={LoginField.Password} value={LoginField.Password}>
-                            {_t('Phone')}
+                            { _t('Phone') }
                         </option>
                     </Field>
                 </div>
@@ -460,8 +460,8 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                    {loginType}
-                    {loginField}
+                    { loginType }
+                    { loginField }
                     <Field
                         className={pwFieldClass}
                         type="password"
@@ -474,7 +474,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         onValidate={this.onPasswordValidate}
                         ref={field => this[LoginField.Password] = field}
                     />
-                    {forgotPasswordJsx}
+                    { forgotPasswordJsx }
                     { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}

src/components/views/auth/RegistrationForm.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 
-import * as sdk from '../../../index';
 import * as Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
@@ -25,12 +24,13 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import PassphraseField from "./PassphraseField";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import Field from '../elements/Field';
 import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import CountryDropdown from "./CountryDropdown";
 
 enum RegistrationField {
     Email = "field_email",
@@ -471,7 +471,6 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         if (!this.showPhoneNumber()) {
             return null;
         }
-        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         const phoneLabel = this.authStepIsRequired('m.login.msisdn') ?
             _t("Phone") :
             _t("Phone (optional)");
@@ -538,15 +537,15 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             <div>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderUsername()}
+                        { this.renderUsername() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderPassword()}
-                        {this.renderPasswordConfirm()}
+                        { this.renderPassword() }
+                        { this.renderPasswordConfirm() }
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        {this.renderEmail()}
-                        {this.renderPhoneNumber()}
+                        { this.renderEmail() }
+                        { this.renderPhoneNumber() }
                     </div>
                     { emailHelperText }
                     { registerButton }

src/components/views/auth/Welcome.tsx

@@ -17,29 +17,34 @@ limitations under the License.
 import React from 'react';
 import classNames from "classnames";
 
-import * as sdk from '../../../index';
+import * as sdk from "../../../index";
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
-import {_td} from "../../../languageHandler";
+import { _td } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import LanguageSelector from "./LanguageSelector";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
 
+interface IProps {
+
+}
+
 @replaceableComponent("views.auth.Welcome")
-export default class Welcome extends React.PureComponent {
-    constructor(props) {
+export default class Welcome extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
         super(props);
 
         CountlyAnalytics.instance.track("onboarding_welcome");
     }
 
-    render() {
-        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
-        const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
+    public render(): React.ReactNode {
+        // FIXME: Using an import will result in wrench-element-tests failures
+        const EmbeddedPage = sdk.getComponent("structures.EmbeddedPage");
 
         const pagesConfig = SdkConfig.get().embeddedPages;
         let pageUrl = null;

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) {
@@ -62,8 +64,14 @@ const calculateUrls = (url, urls) => {
     return Array.from(new Set(_urls));
 };
 
-const useImageUrl = ({url, urls}): [string, () => void] => {
-    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
+const useImageUrl = ({ url, urls }): [string, () => void] => {
+    // 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
 
@@ -107,7 +115,7 @@ const BaseAvatar = (props: IProps) => {
         ...otherProps
     } = props;
 
-    const [imageUrl, onError] = useImageUrl({url, urls});
+    const [imageUrl, onError] = useImageUrl({ url, urls });
 
     if (!imageUrl && defaultToInitialLetter) {
         const initialLetter = AvatarLogic.getInitialLetter(name);
@@ -179,7 +187,8 @@ const BaseAvatar = (props: IProps) => {
                     width: toPx(width),
                     height: toPx(height),
                 }}
-                title={title} alt=""
+                title={title}
+                alt={_t("Avatar")}
                 inputRef={inputRef}
                 {...otherProps} />
         );
@@ -193,7 +202,8 @@ const BaseAvatar = (props: IProps) => {
                     width: toPx(width),
                     height: toPx(height),
                 }}
-                title={title} alt=""
+                title={title}
+                alt=""
                 ref={inputRef}
                 {...otherProps} />
         );

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -20,25 +20,24 @@ 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";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
-import {isPresenceEnabled} from "../../../utils/presence";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {_t} from "../../../languageHandler";
+import { isPresenceEnabled } from "../../../utils/presence";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { _t } from "../../../languageHandler";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IOOBData } from "../../../stores/ThreepidInviteStore";
 
 interface IProps {
     room: Room;
     avatarSize: number;
-    tag: TagID;
     displayBadge?: boolean;
     forceCount?: boolean;
-    oobData?: object;
+    oobData?: IOOBData;
     viewAvatarOnClick?: boolean;
 }
 
@@ -121,7 +120,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 });
+            }
         }
     };
 
@@ -129,7 +131,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (this.isUnmounted) return;
 
         const newIcon = this.getPresenceIcon();
-        if (newIcon !== this.state.icon) this.setState({icon: newIcon});
+        if (newIcon !== this.state.icon) this.setState({ icon: newIcon });
     };
 
     private getPresenceIcon(): Icon {
@@ -203,8 +205,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                 oobData={this.props.oobData}
                 viewAvatarOnClick={this.props.viewAvatarOnClick}
             />
-            {icon}
-            {badge}
+            { icon }
+            { badge }
         </div>;
     }
 }

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;
@@ -51,7 +52,7 @@ export default class GroupAvatar extends React.Component<IProps> {
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;
+        const { groupId, groupAvatarUrl, groupName, ...otherProps } = this.props;
 
         return (
             <BaseAvatar

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;
@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
+    style?: any;
 }
 
 interface IState {
@@ -68,8 +69,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
             let imageUrl = null;
             if (props.member.getMxcAvatarUrl()) {
                 imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    Math.floor(props.width * window.devicePixelRatio),
-                    Math.floor(props.height * window.devicePixelRatio),
+                    props.width,
+                    props.height,
                     props.resizeMethod,
                 );
             }
@@ -89,7 +90,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
     }
 
     render() {
-        let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
+        let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {
@@ -102,8 +103,12 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
         }
 
         return (
-            <BaseAvatar {...otherProps} name={this.state.name} title={this.state.title}
-                idName={userId} url={this.state.imageUrl} onClick={onClick} />
+            <BaseAvatar {...otherProps}
+                name={this.state.name}
+                title={this.state.title}
+                idName={userId}
+                url={this.state.imageUrl}
+                onClick={onClick} />
         );
     }
 }

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {_t} from "../../../languageHandler";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { _t } from "../../../languageHandler";
 import MemberAvatar from '../avatars/MemberAvatar';
 import classNames from 'classnames';
 import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
-import {ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.avatars.MemberStatusMessageAvatar")
 export default class MemberStatusMessageAvatar extends React.Component {
@@ -145,7 +145,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
                 isExpanded={this.state.menuDisplayed}
                 label={_t("User Status")}
             >
-                {avatar}
+                { avatar }
             </ContextMenuButton>
 
             { contextMenu }

src/components/views/avatars/RoomAvatar.tsx

@@ -13,29 +13,35 @@ 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 classNames from "classnames";
 
 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 DMRoomMap from "../../../utils/DMRoomMap";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { IOOBData } from '../../../stores/ThreepidInviteStore';
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    // TODO: type when js-sdk has types
-    oobData?: any;
+    oobData?: IOOBData & {
+        roomId?: string;
+    };
     width?: number;
     height?: number;
     resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
+    className?: string;
     onClick?(): void;
 }
 
@@ -93,8 +99,8 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         let oobAvatar = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
+                props.width,
+                props.height,
                 props.resizeMethod,
             );
         }
@@ -109,12 +115,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(
-            props.room,
-            Math.floor(props.width * window.devicePixelRatio),
-            Math.floor(props.height * window.devicePixelRatio),
-            props.resizeMethod,
-        );
+        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = () => {
@@ -133,14 +134,21 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
+        const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
 
         const roomName = room ? room.name : oobData.name;
+        // If the room is a DM, we use the other user's ID for the color hash
+        // in order to match the room avatar with their avatar
+        const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : oobData.roomId;
 
         return (
-            <BaseAvatar {...otherProps}
+            <BaseAvatar
+                {...otherProps}
+                className={classNames(className, {
+                    mx_RoomAvatar_isSpaceRoom: room?.isSpaceRoom(),
+                })}
                 name={roomName}
-                idName={room ? room.roomId : null}
+                idName={idName}
                 urls={this.state.urls}
                 onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
             />

src/components/views/avatars/WidgetAvatar.tsx

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ComponentProps} from 'react';
+import React, { ComponentProps } from 'react';
 import classNames from 'classnames';
 
-import {IApp} from "../../../stores/WidgetStore";
-import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { IApp } from "../../../stores/WidgetStore";
+import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp;
@@ -49,7 +49,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             width={width}
             height={height}
         />
-    )
+    );
 };
 
 export default WidgetAvatar;

src/components/views/beta/BetaCard.tsx

@@ -0,0 +1,118 @@
+/*
+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";
+
+// XXX: Keep this around for re-use in future Betas
+
+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 && value && <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/CallContextMenu.tsx

@@ -22,7 +22,7 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import CallHandler from '../../../CallHandler';
 import InviteDialog, { KIND_CALL_TRANSFER } from '../dialogs/InviteDialog';
 import Modal from '../../../Modal';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
@@ -42,21 +42,21 @@ export default class CallContextMenu extends React.Component<IProps> {
     onHoldClick = () => {
         this.props.call.setRemoteOnHold(true);
         this.props.onFinished();
-    }
+    };
 
     onUnholdClick = () => {
         CallHandler.sharedInstance().setActiveCallRoomId(this.props.call.roomId);
 
         this.props.onFinished();
-    }
+    };
 
     onTransferClick = () => {
         Modal.createTrackedDialog(
-            'Transfer Call', '', InviteDialog, {kind: KIND_CALL_TRANSFER, call: this.props.call},
-            /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+            'Transfer Call', '', InviteDialog, { kind: KIND_CALL_TRANSFER, call: this.props.call },
+            /*className=*/"mx_InviteDialog_transferWrapper", /*isPriority=*/false, /*isStatic=*/true,
         );
         this.props.onFinished();
-    }
+    };
 
     render() {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");
@@ -65,15 +65,15 @@ export default class CallContextMenu extends React.Component<IProps> {
         let transferItem;
         if (this.props.call.opponentCanBeTransferred()) {
             transferItem = <MenuItem className="mx_CallContextMenu_item" onClick={this.onTransferClick}>
-                {_t("Transfer")}
+                { _t("Transfer") }
             </MenuItem>;
         }
 
         return <ContextMenu {...this.props}>
             <MenuItem className="mx_CallContextMenu_item" onClick={handler}>
-                {holdUnholdCaption}
+                { holdUnholdCaption }
             </MenuItem>
-            {transferItem}
+            { transferItem }
         </ContextMenu>;
     }
 }

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import { _t } from '../../../languageHandler';
+import * as React from "react";
+import { createRef } from "react";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import Dialpad from '../voip/DialPad';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Field from "../elements/Field";
+import DialPad from '../voip/DialPad';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
@@ -31,30 +33,62 @@ interface IState {
 
 @replaceableComponent("views.context_menus.DialpadContextMenu")
 export default class DialpadContextMenu extends React.Component<IProps, IState> {
+    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+
     constructor(props) {
         super(props);
 
         this.state = {
             value: '',
-        }
+        };
     }
 
-    onDigitPress = (digit) => {
+    onDigitPress = (digit: string, ev: ButtonEvent) => {
         this.props.call.sendDtmfDigit(digit);
-        this.setState({value: this.state.value + digit});
-    }
+        this.setState({ value: this.state.value + digit });
+
+        // Keep the number field focused so that keyboard entry is still available
+        // However, don't focus if this wasn't the result of directly clicking on the button,
+        // i.e someone using keyboard navigation.
+        if (ev.type === "click") {
+            this.numberEntryFieldRef.current?.focus();
+        }
+    };
+
+    onCancelClick = () => {
+        this.props.onFinished();
+    };
+
+    onKeyDown = (ev) => {
+        // Prevent Backspace and Delete keys from functioning in the entry field
+        if (ev.code === "Backspace" || ev.code === "Delete") {
+            ev.preventDefault();
+        }
+    };
+
+    onChange = (ev) => {
+        this.setState({ value: ev.target.value });
+    };
 
     render() {
         return <ContextMenu {...this.props}>
-            <div className="mx_DialPadContextMenu_header">
+            <div className="mx_DialPadContextMenuWrapper">
                 <div>
-                    <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
+                    <AccessibleButton className="mx_DialPadContextMenu_cancel" onClick={this.onCancelClick} />
+                </div>
+                <div className="mx_DialPadContextMenu_header">
+                    <Field
+                        ref={this.numberEntryFieldRef}
+                        className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value}
+                        autoFocus={true}
+                        onKeyDown={this.onKeyDown}
+                        onChange={this.onChange}
+                    />
+                </div>
+                <div className="mx_DialPadContextMenu_dialPad">
+                    <DialPad onDigitPress={this.onDigitPress} hasDial={false} />
                 </div>
-                <div className="mx_DialPadContextMenu_dialled">{this.state.value}</div>
-            </div>
-            <div className="mx_DialPadContextMenu_horizSep" />
-            <div className="mx_DialPadContextMenu_dialPad">
-                <Dialpad onDigitPress={this.onDigitPress} hasDialAndDelete={false} />
             </div>
         </ContextMenu>;
     }

src/components/views/context_menus/GenericElementContextMenu.js

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

src/components/views/context_menus/GenericTextContextMenu.js

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

src/components/views/context_menus/GroupInviteTileContextMenu.js

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

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -64,8 +64,8 @@ export const IconizedContextMenuRadio: React.FC<IRadioProps> = ({
         label={label}
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-        <span className="mx_IconizedContextMenu_label">{label}</span>
-        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
+        { active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" /> }
     </MenuItemRadio>;
 };
 
@@ -85,30 +85,34 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
         label={label}
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
-        <span className="mx_IconizedContextMenu_label">{label}</span>
-        {active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" />}
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
+        <span className={classNames("mx_IconizedContextMenu_icon", {
+            mx_IconizedContextMenu_checked: active,
+            mx_IconizedContextMenu_unchecked: !active,
+        })} />
     </MenuItemCheckbox>;
 };
 
-export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, children, ...props }) => {
     return <MenuItem {...props} label={label}>
         { iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} /> }
-        <span className="mx_IconizedContextMenu_label">{label}</span>
+        <span className="mx_IconizedContextMenu_label">{ label }</span>
+        { children }
     </MenuItem>;
 };
 
-export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first, red, className, children}) => {
+export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({ first, red, className, children }) => {
     const classes = classNames("mx_IconizedContextMenu_optionList", className, {
         mx_IconizedContextMenu_optionList_notFirst: !first,
         mx_IconizedContextMenu_optionList_red: red,
     });
 
     return <div className={classes}>
-        {children}
+        { children }
     </div>;
 };
 
-const IconizedContextMenu: React.FC<IProps> = ({className, children, compact, ...props}) => {
+const IconizedContextMenu: React.FC<IProps> = ({ className, children, compact, ...props }) => {
     const classes = classNames("mx_IconizedContextMenu", className, {
         mx_IconizedContextMenu_compact: compact,
     });

src/components/views/context_menus/MessageContextMenu.js

@@ -1,476 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
-
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher/dispatcher';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import Modal from '../../../Modal';
-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";
-
-function canCancel(eventStatus) {
-    return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
-}
-
-@replaceableComponent("views.context_menus.MessageContextMenu")
-export default class MessageContextMenu extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent associated with the context menu */
-        mxEvent: PropTypes.object.isRequired,
-
-        /* an optional EventTileOps implementation that can be used to unhide preview widgets */
-        eventTileOps: PropTypes.object,
-
-        /* an optional function to be called when the user clicks collapse thread, if not provided hide button */
-        collapseReplyThread: PropTypes.func,
-
-        /* callback called when the menu is dismissed */
-        onFinished: PropTypes.func,
-
-        /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
-        onCloseDialog: PropTypes.func,
-    };
-
-    state = {
-        canRedact: false,
-        canPin: false,
-    };
-
-    componentDidMount() {
-        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
-        this._checkPermissions();
-    }
-
-    componentWillUnmount() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener('RoomMember.powerLevel', this._checkPermissions);
-        }
-    }
-
-    _checkPermissions = () => {
-        const cli = MatrixClientPeg.get();
-        const room = cli.getRoom(this.props.mxEvent.getRoomId());
-
-        // We explicitly decline to show the redact option on ACL events as it has a potential
-        // to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
-        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
-            && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
-        let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
-
-        // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
-        if (!SettingsStore.getValue("feature_pinning")) canPin = false;
-
-        this.setState({canRedact, canPin});
-    };
-
-    _isPinned() {
-        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
-        if (!pinnedEvent) return false;
-        const content = pinnedEvent.getContent();
-        return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
-    }
-
-    onResendClick = () => {
-        Resend.resend(this.props.mxEvent);
-        this.closeMenu();
-    };
-
-    onResendEditClick = () => {
-        Resend.resend(this.props.mxEvent.replacingEvent());
-        this.closeMenu();
-    };
-
-    onResendRedactionClick = () => {
-        Resend.resend(this.props.mxEvent.localRedactionEvent());
-        this.closeMenu();
-    };
-
-    onResendReactionsClick = () => {
-        for (const reaction of this._getUnsentReactions()) {
-            Resend.resend(reaction);
-        }
-        this.closeMenu();
-    };
-
-    onReportEventClick = () => {
-        const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
-        Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
-            mxEvent: this.props.mxEvent,
-        }, 'mx_Dialog_reportEvent');
-        this.closeMenu();
-    };
-
-    onViewSourceClick = () => {
-        const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            mxEvent: this.props.mxEvent,
-        }, 'mx_Dialog_viewsource');
-        this.closeMenu();
-    };
-
-    onRedactClick = () => {
-        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
-            onFinished: async (proceed, reason) => {
-                if (!proceed) return;
-
-                const cli = MatrixClientPeg.get();
-                try {
-                    if (this.props.onCloseDialog) this.props.onCloseDialog();
-                    await cli.redactEvent(
-                        this.props.mxEvent.getRoomId(),
-                        this.props.mxEvent.getId(),
-                        undefined,
-                        reason ? { reason } : {},
-                    );
-                } catch (e) {
-                    const code = e.errcode || e.statusCode;
-                    // only show the dialog if failing for something other than a network error
-                    // (e.g. no errcode or statusCode) as in that case the redactions end up in the
-                    // detached queue and we show the room status bar to allow retry
-                    if (typeof code !== "undefined") {
-                        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        // display error message stating you couldn't delete this.
-                        Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
-                            title: _t('Error'),
-                            description: _t('You cannot delete this message. (%(code)s)', {code}),
-                        });
-                    }
-                }
-            },
-        }, 'mx_Dialog_confirmredact');
-        this.closeMenu();
-    };
-
-    onCancelSendClick = () => {
-        const mxEvent = this.props.mxEvent;
-        const editEvent = mxEvent.replacingEvent();
-        const redactEvent = mxEvent.localRedactionEvent();
-        const pendingReactions = this._getPendingReactions();
-
-        if (editEvent && canCancel(editEvent.status)) {
-            Resend.removeFromQueue(editEvent);
-        }
-        if (redactEvent && canCancel(redactEvent.status)) {
-            Resend.removeFromQueue(redactEvent);
-        }
-        if (pendingReactions.length) {
-            for (const reaction of pendingReactions) {
-                Resend.removeFromQueue(reaction);
-            }
-        }
-        if (canCancel(mxEvent.status)) {
-            Resend.removeFromQueue(this.props.mxEvent);
-        }
-        this.closeMenu();
-    };
-
-    onForwardClick = () => {
-        if (this.props.onCloseDialog) this.props.onCloseDialog();
-        dis.dispatch({
-            action: 'forward_event',
-            event: this.props.mxEvent,
-        });
-        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();
-                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
-            });
-        this.closeMenu();
-    };
-
-    closeMenu = () => {
-        if (this.props.onFinished) this.props.onFinished();
-    };
-
-    onUnhidePreviewClick = () => {
-        if (this.props.eventTileOps) {
-            this.props.eventTileOps.unhideWidget();
-        }
-        this.closeMenu();
-    };
-
-    onQuoteClick = () => {
-        dis.dispatch({
-            action: 'quote',
-            event: this.props.mxEvent,
-        });
-        this.closeMenu();
-    };
-
-    onPermalinkClick = (e: Event) => {
-        e.preventDefault();
-        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
-        Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
-            target: this.props.mxEvent,
-            permalinkCreator: this.props.permalinkCreator,
-        });
-        this.closeMenu();
-    };
-
-    onCollapseReplyThreadClick = () => {
-        this.props.collapseReplyThread();
-        this.closeMenu();
-    };
-
-    _getReactions(filter) {
-        const cli = MatrixClientPeg.get();
-        const room = cli.getRoom(this.props.mxEvent.getRoomId());
-        const eventId = this.props.mxEvent.getId();
-        return room.getPendingEvents().filter(e => {
-            const relation = e.getRelation();
-            return relation &&
-                relation.rel_type === "m.annotation" &&
-                relation.event_id === eventId &&
-                filter(e);
-        });
-    }
-
-    _getPendingReactions() {
-        return this._getReactions(e => canCancel(e.status));
-    }
-
-    _getUnsentReactions() {
-        return this._getReactions(e => e.status === EventStatus.NOT_SENT);
-    }
-
-    render() {
-        const cli = MatrixClientPeg.get();
-        const me = cli.getUserId();
-        const mxEvent = this.props.mxEvent;
-        const eventStatus = mxEvent.status;
-        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
-        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
-        const unsentReactionsCount = this._getUnsentReactions().length;
-        const pendingReactionsCount = this._getPendingReactions().length;
-        const allowCancel = canCancel(mxEvent.status) ||
-            canCancel(editStatus) ||
-            canCancel(redactStatus) ||
-            pendingReactionsCount !== 0;
-        let resendButton;
-        let resendEditButton;
-        let resendReactionsButton;
-        let resendRedactionButton;
-        let redactButton;
-        let cancelButton;
-        let forwardButton;
-        let pinButton;
-        let unhidePreviewButton;
-        let externalURLButton;
-        let quoteButton;
-        let collapseReplyThread;
-
-        // status is SENT before remote-echo, null after
-        const isSent = !eventStatus || eventStatus === EventStatus.SENT;
-        if (!mxEvent.isRedacted()) {
-            if (eventStatus === EventStatus.NOT_SENT) {
-                resendButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
-                        { _t('Resend') }
-                    </MenuItem>
-                );
-            }
-
-            if (editStatus === EventStatus.NOT_SENT) {
-                resendEditButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
-                        { _t('Resend edit') }
-                    </MenuItem>
-                );
-            }
-
-            if (unsentReactionsCount !== 0) {
-                resendReactionsButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
-                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </MenuItem>
-                );
-            }
-        }
-
-        if (redactStatus === EventStatus.NOT_SENT) {
-            resendRedactionButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
-                    { _t('Resend removal') }
-                </MenuItem>
-            );
-        }
-
-        if (isSent && this.state.canRedact) {
-            redactButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Remove') }
-                </MenuItem>
-            );
-        }
-
-        if (allowCancel) {
-            cancelButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
-                    { _t('Cancel Sending') }
-                </MenuItem>
-            );
-        }
-
-        if (isContentActionable(mxEvent)) {
-            forwardButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                    { _t('Forward Message') }
-                </MenuItem>
-            );
-
-            if (this.state.canPin) {
-                pinButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </MenuItem>
-                );
-            }
-        }
-
-        const viewSourceButton = (
-            <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                { _t('View Source') }
-            </MenuItem>
-        );
-
-        if (this.props.eventTileOps) {
-            if (this.props.eventTileOps.isWidgetHidden()) {
-                unhidePreviewButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        { _t('Unhide Preview') }
-                    </MenuItem>
-                );
-            }
-        }
-
-        let permalink;
-        if (this.props.permalinkCreator) {
-            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
-        }
-        // 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"
-                onClick={this.onPermalinkClick}
-                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>
-            );
-        }
-
-        // Bridges can provide a 'external_url' to link back to the source.
-        if (
-            typeof(mxEvent.event.content.external_url) === "string" &&
-            isUrlPermitted(mxEvent.event.content.external_url)
-        ) {
-            externalURLButton = (
-                <MenuItem
-                    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>
-            );
-        }
-
-        let reportEventButton;
-        if (mxEvent.getSender() !== me) {
-            reportEventButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
-                    { _t('Report Content') }
-                </MenuItem>
-            );
-        }
-
-        return (
-            <div className="mx_MessageContextMenu">
-                { resendButton }
-                { resendEditButton }
-                { resendReactionsButton }
-                { resendRedactionButton }
-                { redactButton }
-                { cancelButton }
-                { forwardButton }
-                { pinButton }
-                { viewSourceButton }
-                { unhidePreviewButton }
-                { permalinkButton }
-                { quoteButton }
-                { externalURLButton }
-                { collapseReplyThread }
-                { reportEventButton }
-            </div>
-        );
-    }
-}

src/components/views/context_menus/MessageContextMenu.tsx

@@ -0,0 +1,440 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+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.
+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 { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
+
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import Resend from '../../../Resend';
+import SettingsStore from '../../../settings/SettingsStore';
+import { isUrlPermitted } from '../../../HtmlUtils';
+import { isContentActionable } from '../../../utils/EventUtils';
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
+import ForwardDialog from "../dialogs/ForwardDialog";
+import { Action } from "../../../dispatcher/actions";
+import ReportEventDialog from '../dialogs/ReportEventDialog';
+import ViewSource from '../../structures/ViewSource';
+import ConfirmRedactDialog from '../dialogs/ConfirmRedactDialog';
+import ErrorDialog from '../dialogs/ErrorDialog';
+import ShareDialog from '../dialogs/ShareDialog';
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+
+export function canCancel(eventStatus: EventStatus): boolean {
+    return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
+}
+
+export interface IEventTileOps {
+    isWidgetHidden(): boolean;
+    unhideWidget(): void;
+}
+
+export interface IOperableEventTile {
+    getEventTileOps(): IEventTileOps;
+}
+
+interface IProps {
+    /* the MatrixEvent associated with the context menu */
+    mxEvent: MatrixEvent;
+    /* an optional EventTileOps implementation that can be used to unhide preview widgets */
+    eventTileOps?: IEventTileOps;
+    permalinkCreator?: RoomPermalinkCreator;
+    /* an optional function to be called when the user clicks collapse thread, if not provided hide button */
+    collapseReplyThread?(): void;
+    /* callback called when the menu is dismissed */
+    onFinished(): void;
+    /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+    onCloseDialog?(): void;
+}
+
+interface IState {
+    canRedact: boolean;
+    canPin: boolean;
+}
+
+@replaceableComponent("views.context_menus.MessageContextMenu")
+export default class MessageContextMenu extends React.Component<IProps, IState> {
+    state = {
+        canRedact: false,
+        canPin: false,
+    };
+
+    componentDidMount() {
+        MatrixClientPeg.get().on('RoomMember.powerLevel', this.checkPermissions);
+        this.checkPermissions();
+    }
+
+    componentWillUnmount() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener('RoomMember.powerLevel', this.checkPermissions);
+        }
+    }
+
+    private checkPermissions = (): void => {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+
+        // We explicitly decline to show the redact option on ACL events as it has a potential
+        // to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
+        // Similarly for encryption events, since redacting them "breaks everything"
+        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
+            && this.props.mxEvent.getType() !== EventType.RoomServerAcl
+            && this.props.mxEvent.getType() !== EventType.RoomEncryption;
+        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;
+
+        this.setState({ canRedact, canPin });
+    };
+
+    private isPinned(): boolean {
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        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());
+    }
+
+    private onResendReactionsClick = (): void => {
+        for (const reaction of this.getUnsentReactions()) {
+            Resend.resend(reaction);
+        }
+        this.closeMenu();
+    };
+
+    private onReportEventClick = (): void => {
+        Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
+            mxEvent: this.props.mxEvent,
+        }, 'mx_Dialog_reportEvent');
+        this.closeMenu();
+    };
+
+    private onViewSourceClick = (): void => {
+        Modal.createTrackedDialog('View Event Source', '', ViewSource, {
+            mxEvent: this.props.mxEvent,
+        }, 'mx_Dialog_viewsource');
+        this.closeMenu();
+    };
+
+    private onRedactClick = (): void => {
+        Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
+            onFinished: async (proceed: boolean, reason?: string) => {
+                if (!proceed) return;
+
+                const cli = MatrixClientPeg.get();
+                try {
+                    this.props.onCloseDialog?.();
+                    await cli.redactEvent(
+                        this.props.mxEvent.getRoomId(),
+                        this.props.mxEvent.getId(),
+                        undefined,
+                        reason ? { reason } : {},
+                    );
+                } catch (e) {
+                    const code = e.errcode || e.statusCode;
+                    // only show the dialog if failing for something other than a network error
+                    // (e.g. no errcode or statusCode) as in that case the redactions end up in the
+                    // detached queue and we show the room status bar to allow retry
+                    if (typeof code !== "undefined") {
+                        // display error message stating you couldn't delete this.
+                        Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
+                            title: _t('Error'),
+                            description: _t('You cannot delete this message. (%(code)s)', { code }),
+                        });
+                    }
+                }
+            },
+        }, 'mx_Dialog_confirmredact');
+        this.closeMenu();
+    };
+
+    private onForwardClick = (): void => {
+        Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
+            matrixClient: MatrixClientPeg.get(),
+            event: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
+        });
+        this.closeMenu();
+    };
+
+    private onPinClick = (): void => {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const eventId = this.props.mxEvent.getId();
+
+        const pinnedIds = room?.currentState?.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent().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();
+    };
+
+    private closeMenu = (): void => {
+        this.props.onFinished();
+    };
+
+    private onUnhidePreviewClick = (): void => {
+        this.props.eventTileOps?.unhideWidget();
+        this.closeMenu();
+    };
+
+    private onQuoteClick = (): void => {
+        dis.dispatch({
+            action: Action.ComposerInsert,
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    };
+
+    private onPermalinkClick = (e: React.MouseEvent): void => {
+        e.preventDefault();
+        Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
+            target: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
+        });
+        this.closeMenu();
+    };
+
+    private onCollapseReplyThreadClick = (): void => {
+        this.props.collapseReplyThread();
+        this.closeMenu();
+    };
+
+    private getReactions(filter: (e: MatrixEvent) => boolean): MatrixEvent[] {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const eventId = this.props.mxEvent.getId();
+        return room.getPendingEvents().filter(e => {
+            const relation = e.getRelation();
+            return relation?.rel_type === RelationType.Annotation && relation.event_id === eventId && filter(e);
+        });
+    }
+
+    private getPendingReactions(): MatrixEvent[] {
+        return this.getReactions(e => canCancel(e.status));
+    }
+
+    private getUnsentReactions(): MatrixEvent[] {
+        return this.getReactions(e => e.status === EventStatus.NOT_SENT);
+    }
+
+    render() {
+        const cli = MatrixClientPeg.get();
+        const me = cli.getUserId();
+        const mxEvent = this.props.mxEvent;
+        const eventStatus = mxEvent.status;
+        const unsentReactionsCount = this.getUnsentReactions().length;
+
+        let resendReactionsButton: JSX.Element;
+        let redactButton: JSX.Element;
+        let forwardButton: JSX.Element;
+        let pinButton: JSX.Element;
+        let unhidePreviewButton: JSX.Element;
+        let externalURLButton: JSX.Element;
+        let quoteButton: JSX.Element;
+        let collapseReplyThread: JSX.Element;
+        let redactItemList: JSX.Element;
+
+        // status is SENT before remote-echo, null after
+        const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+        if (!mxEvent.isRedacted()) {
+            if (unsentReactionsCount !== 0) {
+                resendReactionsButton = (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconResend"
+                        label={_t('Resend %(unsentCount)s reaction(s)', { unsentCount: unsentReactionsCount })}
+                        onClick={this.onResendReactionsClick}
+                    />
+                );
+            }
+        }
+
+        if (isSent && this.state.canRedact) {
+            redactButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconRedact"
+                    label={_t("Remove")}
+                    onClick={this.onRedactClick}
+                />
+            );
+        }
+
+        if (isContentActionable(mxEvent)) {
+            forwardButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconForward"
+                    label={_t("Forward")}
+                    onClick={this.onForwardClick}
+                />
+            );
+
+            if (this.state.canPin) {
+                pinButton = (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconPin"
+                        label={this.isPinned() ? _t('Unpin') : _t('Pin')}
+                        onClick={this.onPinClick}
+                    />
+                );
+            }
+        }
+
+        const viewSourceButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
+                label={_t("View source")}
+                onClick={this.onViewSourceClick}
+            />
+        );
+
+        if (this.props.eventTileOps) {
+            if (this.props.eventTileOps.isWidgetHidden()) {
+                unhidePreviewButton = (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconUnhidePreview"
+                        label={_t("Show preview")}
+                        onClick={this.onUnhidePreviewClick}
+                    />
+                );
+            }
+        }
+
+        let permalink;
+        if (this.props.permalinkCreator) {
+            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+        }
+        const permalinkButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconPermalink"
+                onClick={this.onPermalinkClick}
+                label={_t('Share')}
+                element="a"
+                {
+                    // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`
+                    ...{
+                        href: permalink,
+                        target: "_blank",
+                        rel: "noreferrer noopener",
+                    }
+                }
+            />
+        );
+
+        if (this.props.eventTileOps) { // this event is rendered using TextualBody
+            quoteButton = (
+                <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.getContent().external_url) === "string" &&
+            isUrlPermitted(mxEvent.getContent().external_url)
+        ) {
+            externalURLButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconLink"
+                    onClick={this.closeMenu}
+                    label={_t('Source URL')}
+                    element="a"
+                    {
+                        // XXX: Typescript signature for AccessibleButton doesn't work properly for non-inputs like `a`
+                        ...{
+                            target: "_blank",
+                            rel: "noreferrer noopener",
+                            href: mxEvent.getContent().external_url,
+                        }
+                    }
+                />
+            );
+        }
+
+        if (this.props.collapseReplyThread) {
+            collapseReplyThread = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconCollapse"
+                    label={_t("Collapse reply thread")}
+                    onClick={this.onCollapseReplyThreadClick}
+                />
+            );
+        }
+
+        let reportEventButton: JSX.Element;
+        if (mxEvent.getSender() !== me) {
+            reportEventButton = (
+                <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 (
+            <IconizedContextMenu
+                {...this.props}
+                className="mx_MessageContextMenu"
+                compact={true}
+            >
+                { commonItemsList }
+                { redactItemList }
+            </IconizedContextMenu>
+        );
+    }
+}

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -0,0 +1,216 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import {
+    IProps as IContextMenuProps,
+} from "../../structures/ContextMenu";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
+import { _t } from "../../../languageHandler";
+import {
+    leaveSpace,
+    shouldShowSpaceSettings,
+    showAddExistingRooms,
+    showCreateNewRoom,
+    showCreateNewSubspace,
+    showSpaceInvite,
+    showSpaceSettings,
+} from "../../../utils/space";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { ButtonEvent } from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import RoomViewStore from "../../../stores/RoomViewStore";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { Action } from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { BetaPill } from "../beta/BetaCard";
+
+interface IProps extends IContextMenuProps {
+    space: Room;
+}
+
+const SpaceContextMenu = ({ space, onFinished, ...props }: IProps) => {
+    const cli = useContext(MatrixClientContext);
+    const userId = cli.getUserId();
+
+    let inviteOption;
+    if (space.getJoinRule() === "public" || space.canInvite(userId)) {
+        const onInviteClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showSpaceInvite(space);
+            onFinished();
+        };
+
+        inviteOption = (
+            <IconizedContextMenuOption
+                className="mx_SpacePanel_contextMenu_inviteButton"
+                iconClassName="mx_SpacePanel_iconInvite"
+                label={_t("Invite people")}
+                onClick={onInviteClick}
+            />
+        );
+    }
+
+    let settingsOption;
+    let leaveSection;
+    if (shouldShowSpaceSettings(space)) {
+        const onSettingsClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showSpaceSettings(space);
+            onFinished();
+        };
+
+        settingsOption = (
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconSettings"
+                label={_t("Settings")}
+                onClick={onSettingsClick}
+            />
+        );
+    } else {
+        const onLeaveClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            leaveSpace(space);
+            onFinished();
+        };
+
+        leaveSection = <IconizedContextMenuOptionList red first>
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconLeave"
+                label={_t("Leave space")}
+                onClick={onLeaveClick}
+            />
+        </IconizedContextMenuOptionList>;
+    }
+
+    const canAddRooms = space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
+    let newRoomSection;
+    if (space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
+        const onNewRoomClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showCreateNewRoom(space);
+            onFinished();
+        };
+
+        const onAddExistingRoomClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showAddExistingRooms(space);
+            onFinished();
+        };
+
+        const onNewSubspaceClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showCreateNewSubspace(space);
+            onFinished();
+        };
+
+        newRoomSection = <IconizedContextMenuOptionList first>
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconPlus"
+                label={_t("Create new room")}
+                onClick={onNewRoomClick}
+            />
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconHash"
+                label={_t("Add existing room")}
+                onClick={onAddExistingRoomClick}
+            />
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconPlus"
+                label={_t("Add space")}
+                onClick={onNewSubspaceClick}
+            >
+                <BetaPill />
+            </IconizedContextMenuOption>
+        </IconizedContextMenuOptionList>;
+    }
+
+    const onMembersClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (!RoomViewStore.getRoomId()) {
+            defaultDispatcher.dispatch({
+                action: "view_room",
+                room_id: space.roomId,
+            }, true);
+        }
+
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.SpaceMemberList,
+            refireParams: { space },
+        });
+        onFinished();
+    };
+
+    const onExploreRoomsClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        defaultDispatcher.dispatch({
+            action: "view_room",
+            room_id: space.roomId,
+        });
+        onFinished();
+    };
+
+    return <IconizedContextMenu
+        {...props}
+        onFinished={onFinished}
+        className="mx_SpacePanel_contextMenu"
+        compact
+    >
+        <div className="mx_SpacePanel_contextMenu_header">
+            { space.name }
+        </div>
+        <IconizedContextMenuOptionList first>
+            { inviteOption }
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconMembers"
+                label={_t("Members")}
+                onClick={onMembersClick}
+            />
+            { settingsOption }
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconExplore"
+                label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
+                onClick={onExploreRoomsClick}
+            />
+        </IconizedContextMenuOptionList>
+        { newRoomSection }
+        { leaveSection }
+    </IconizedContextMenu>;
+};
+
+export default SpaceContextMenu;
+

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -17,10 +17,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.context_menus.StatusMessageContextMenu")
 export default class StatusMessageContextMenu extends React.Component {
@@ -99,20 +99,22 @@ export default class StatusMessageContextMenu extends React.Component {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_clear"
                     onClick={this._onClearClick}
                 >
-                    <span>{_t("Clear status")}</span>
+                    <span>{ _t("Clear status") }</span>
                 </AccessibleButton>;
             } else {
                 actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
                     onClick={this._onSubmit}
                 >
-                    <span>{_t("Update status")}</span>
+                    <span>{ _t("Update status") }</span>
                 </AccessibleButton>;
             }
         } else {
-            actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
-                disabled={!this.state.message} onClick={this._onSubmit}
+            actionButton = <AccessibleButton
+                className="mx_StatusMessageContextMenu_submit"
+                disabled={!this.state.message}
+                onClick={this._onSubmit}
             >
-                <span>{_t("Set status")}</span>
+                <span>{ _t("Set status") }</span>
             </AccessibleButton>;
         }
 
@@ -121,17 +123,24 @@ export default class StatusMessageContextMenu extends React.Component {
             spinner = <Spinner w="24" h="24" />;
         }
 
-        const form = <form className="mx_StatusMessageContextMenu_form"
-            autoComplete="off" onSubmit={this._onSubmit}
+        const form = <form
+            className="mx_StatusMessageContextMenu_form"
+            autoComplete="off"
+            onSubmit={this._onSubmit}
         >
-            <input type="text" className="mx_StatusMessageContextMenu_message"
-                key="message" placeholder={_t("Set a new status...")}
-                autoFocus={true} maxLength="60" value={this.state.message}
+            <input
+                type="text"
+                className="mx_StatusMessageContextMenu_message"
+                key="message"
+                placeholder={_t("Set a new status...")}
+                autoFocus={true}
+                maxLength="60"
+                value={this.state.message}
                 onChange={this._onStatusChange}
             />
             <div className="mx_StatusMessageContextMenu_actionContainer">
-                {actionButton}
-                {spinner}
+                { actionButton }
+                { spinner }
             </div>
         </form>;
 

src/components/views/context_menus/TagTileContextMenu.js

@@ -20,49 +20,92 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
-import {MenuItem} from "../../structures/ContextMenu";
+import { MenuItem } from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
+import { createSpaceFromCommunity } from "../../../utils/space";
+import GroupStore from "../../../stores/GroupStore";
 
 @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();
-    }
+    };
+
+    _onCreateSpaceClick = () => {
+        createSpaceFromCommunity(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>
+            );
+        }
+
+        let createSpaceOption;
+        if (GroupStore.isUserPrivileged(this.props.tag)) {
+            createSpaceOption = <>
+                <hr className="mx_TagTileContextMenu_separator" role="separator" />
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_createSpace" onClick={this._onCreateSpaceClick}>
+                    { _t("Create Space") }
+                </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>
+            { createSpaceOption }
         </div>;
     }
 }

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext} from "react";
-import {MatrixCapabilities} from "matrix-widget-api";
+import React, { useContext } from "react";
+import { MatrixCapabilities } from "matrix-widget-api";
 
-import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
-import {ChevronFace} from "../../structures/ContextMenu";
-import {_t} from "../../../languageHandler";
-import {IApp} from "../../../stores/WidgetStore";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
+import { ChevronFace } from "../../structures/ContextMenu";
+import { _t } from "../../../languageHandler";
+import { IApp } from "../../../stores/WidgetStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import RoomContext from "../../../contexts/RoomContext";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import {WidgetType} from "../../../widgets/WidgetType";
+import { WidgetType } from "../../../widgets/WidgetType";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
@@ -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,11 +49,12 @@ const WidgetContextMenu: React.FC<IProps> = ({
     app,
     userWidget,
     onDeleteClick,
+    onEditClick,
     showUnpin,
     ...props
 }) => {
     const cli = useContext(MatrixClientContext);
-    const {room, roomId} = useContext(RoomContext);
+    const { room, roomId } = useContext(RoomContext);
 
     const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
     const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
@@ -73,7 +76,8 @@ const WidgetContextMenu: React.FC<IProps> = ({
             onFinished();
         };
         streamAudioStreamButton = <IconizedContextMenuOption
-            onClick={onStreamAudioClick} label={_t("Start audio stream")}
+            onClick={onStreamAudioClick}
+            label={_t("Start audio stream")}
         />;
     }
 
@@ -89,12 +93,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 +124,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/AddExistingSubspaceDialog.tsx

@@ -0,0 +1,67 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { AddExistingToSpace, defaultSpacesRenderer, SubspaceSelector } from "./AddExistingToSpaceDialog";
+
+interface IProps {
+    space: Room;
+    onCreateSubspaceClick(): void;
+    onFinished(added?: boolean): void;
+}
+
+const AddExistingSubspaceDialog: React.FC<IProps> = ({ space, onCreateSubspaceClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+
+    return <BaseDialog
+        title={(
+            <SubspaceSelector
+                title={_t("Add existing space")}
+                space={space}
+                value={selectedSpace}
+                onChange={setSelectedSpace}
+            />
+        )}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpace"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={space.client}>
+            <AddExistingToSpace
+                space={space}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new space instead?") }</div>
+                    <AccessibleButton onClick={onCreateSubspaceClick} kind="link">
+                        { _t("Create a new space") }
+                    </AccessibleButton>
+                </>}
+                filterPlaceholder={_t("Search for spaces")}
+                spacesRenderer={defaultSpacesRenderer}
+            />
+        </MatrixClientContext.Provider>
+    </BaseDialog>;
+};
+
+export default AddExistingSubspaceDialog;
+

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -14,196 +14,437 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {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";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { sleep } from "matrix-js-sdk/src/utils";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
-import {_t} from '../../../languageHandler';
-import {IDialogProps} from "./IDialogProps";
+import { _t } from '../../../languageHandler';
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
-import {getDisplayAliasForRoom} from "../../../Rooms";
+import { getDisplayAliasForRoom } from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {allSettled} from "../../../utils/promise";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
+import { calculateRoomVia } from "../../../utils/permalinks/Permalinks";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import ProgressBar from "../elements/ProgressBar";
+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;
+interface IProps {
     space: Room;
-    onCreateRoomClick(cli: MatrixClient, space: Room): void;
+    onCreateRoomClick(): void;
+    onAddSubspaceClick(): void;
+    onFinished(added?: boolean): void;
 }
 
-const Entry = ({ room, checked, onChange }) => {
-    return <div className="mx_AddExistingToSpaceDialog_entry">
-        <RoomAvatar room={room} height={32} width={32} />
-        <span className="mx_AddExistingToSpaceDialog_entry_name">{ room.name }</span>
-        <StyledCheckbox onChange={(e) => onChange(e.target.checked)} checked={checked} />
-    </div>;
+export const Entry = ({ room, checked, onChange }) => {
+    return <label className="mx_AddExistingToSpace_entry">
+        { 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}
+            checked={checked}
+            disabled={!onChange}
+        />
+    </label>;
 };
 
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase();
+interface IAddExistingToSpaceProps {
+    space: Room;
+    footerPrompt?: ReactNode;
+    filterPlaceholder: string;
+    emptySelectionButton?: ReactNode;
+    onFinished(added: boolean): void;
+    roomsRenderer?(
+        rooms: Room[],
+        selectedToAdd: Set<Room>,
+        onChange: undefined | ((checked: boolean, room: Room) => void),
+        truncateAt: number,
+        overflowTile: (overflowCount: number, totalCount: number) => JSX.Element,
+    ): ReactNode;
+    spacesRenderer?(
+        spaces: Room[],
+        selectedToAdd: Set<Room>,
+        onChange?: (checked: boolean, room: Room) => void,
+    ): ReactNode;
+    dmsRenderer?(
+        dms: Room[],
+        selectedToAdd: Set<Room>,
+        onChange?: (checked: boolean, room: Room) => void,
+    ): ReactNode;
+}
+
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
+    space,
+    footerPrompt,
+    emptySelectionButton,
+    filterPlaceholder,
+    roomsRenderer,
+    dmsRenderer,
+    spacesRenderer,
+    onFinished,
+}) => {
+    const cli = useContext(MatrixClientContext);
+    const visibleRooms = useMemo(() => cli.getVisibleRooms().filter(r => r.getMyMembership() === "join"), [cli]);
 
-    const [selectedSpace, setSelectedSpace] = useState(space);
     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();
 
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
-    const existingSubspacesSet = new Set(existingSubspaces);
-    const spaces = SpaceStore.instance.getSpaces().filter(s => {
-        return !existingSubspacesSet.has(s) // not already in space
-            && space !== s // not the top-level space
-            && selectedSpace !== s // not the selected space
-            && s.name.toLowerCase().includes(lcQuery); // contains query
-    });
+    const existingSubspacesSet = useMemo(() => new Set(SpaceStore.instance.getChildSpaces(space.roomId)), [space]);
+    const existingRoomsSet = useMemo(() => new Set(SpaceStore.instance.getChildRooms(space.roomId)), [space]);
 
-    const existingRooms = SpaceStore.instance.getChildRooms(space.roomId);
-    const existingRoomsSet = new Set(existingRooms);
-    const rooms = cli.getVisibleRooms().filter(room => {
-        return !existingRoomsSet.has(room) // not already in space
-            && !room.isSpaceRoom() // not a space itself
-            && room.name.toLowerCase().includes(lcQuery) // contains query
-            && !DMRoomMap.shared().getUserIdForRoomId(room.roomId); // not a DM
-    });
+    const [spaces, rooms, dms] = useMemo(() => {
+        let rooms = visibleRooms;
 
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-
-    let spaceOptionSection;
-    if (existingSubspacesSet.size > 0) {
-        const options = [space, ...existingSubspaces].map((space) => {
-            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
-                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+        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>
-        );
+            rooms = matcher.match(lcQuery);
+        }
+
+        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);
+        setProgress(0);
+
+        let error;
+
+        for (const room of selectedToAdd) {
+            const via = calculateRoomVia(room);
+            try {
+                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                    if (e.errcode === "M_LIMIT_EXCEEDED") {
+                        await sleep(e.data.retry_after_ms);
+                        return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                    }
+
+                    throw e;
+                });
+                setProgress(i => i + 1);
+            } catch (e) {
+                console.error("Failed to add rooms to space", e);
+                setError(error = e);
+                break;
+            }
+        }
+
+        if (!error) {
+            onFinished(true);
+        }
+    };
+
+    const busy = progress !== null;
+
+    let footer;
+    if (error) {
+        footer = <>
+            <img
+                src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                height="24"
+                width="24"
+                alt=""
+            />
+
+            <span className="mx_AddExistingToSpaceDialog_error">
+                <div className="mx_AddExistingToSpaceDialog_errorHeading">{ _t("Not all selected were added") }</div>
+                <div className="mx_AddExistingToSpaceDialog_errorCaption">{ _t("Try again") }</div>
+            </span>
+
+            <AccessibleButton className="mx_AddExistingToSpaceDialog_retryButton" onClick={addRooms}>
+                { _t("Retry") }
+            </AccessibleButton>
+        </>;
+    } else if (busy) {
+        footer = <span>
+            <ProgressBar value={progress} max={selectedToAdd.size} />
+            <div className="mx_AddExistingToSpaceDialog_progressText">
+                { _t("Adding rooms... (%(progress)s out of %(count)s)", {
+                    count: selectedToAdd.size,
+                    progress,
+                }) }
+            </div>
+        </span>;
     } else {
-        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
-            { space.name || getDisplayAliasForRoom(space) || space.roomId }
-        </div>;
+        let button = emptySelectionButton;
+        if (!button || selectedToAdd.size > 0) {
+            button = <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
+            </AccessibleButton>;
+        }
+
+        footer = <>
+            <span>
+                { footerPrompt }
+            </span>
+
+            { button }
+        </>;
     }
 
-    const title = <React.Fragment>
-        <RoomAvatar room={selectedSpace} height={40} width={40} />
-        <div>
-            <h1>{ _t("Add existing rooms") }</h1>
-            { spaceOptionSection }
-        </div>
-    </React.Fragment>;
+    const onChange = !busy && !error ? (checked: boolean, room: Room) => {
+        if (checked) {
+            selectedToAdd.add(room);
+        } else {
+            selectedToAdd.delete(room);
+        }
+        setSelectedToAdd(new Set(selectedToAdd));
+    } : null;
 
-    return <BaseDialog
-        title={title}
-        className="mx_AddExistingToSpaceDialog"
-        contentId="mx_AddExistingToSpaceDialog"
-        onFinished={onFinished}
-        fixedWidth={false}
-    >
-        { error && <div className="mx_AddExistingToSpaceDialog_errorText">{ error }</div> }
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount: number, totalCount: number): JSX.Element {
+        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)}
+            />
+        );
+    }
 
+    let noResults = true;
+    if ((roomsRenderer && rooms.length > 0) ||
+        (dmsRenderer && dms.length > 0) ||
+        (!roomsRenderer && !dmsRenderer && spacesRenderer && spaces.length > 0) // only count spaces when alone
+    ) {
+        noResults = false;
+    }
+
+    return <div className="mx_AddExistingToSpace">
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
+            placeholder={filterPlaceholder}
             onSearch={setQuery}
             autoComplete={true}
+            autoFocus={true}
         />
-        <AutoHideScrollbar className="mx_AddExistingToSpaceDialog_content" id="mx_AddExistingToSpaceDialog">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selectedToAdd.has(room)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(room);
-                                } else {
-                                    selectedToAdd.delete(room);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
+            { rooms.length > 0 && roomsRenderer ? (
+                roomsRenderer(rooms, selectedToAdd, onChange, truncateAt, overflowTile)
             ) : undefined }
 
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selectedToAdd.has(space)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
+            { spaces.length > 0 && spacesRenderer ? (
+                spacesRenderer(spaces, selectedToAdd, onChange)
             ) : null }
 
-            { spaces.length + rooms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
+            { dms.length > 0 && dmsRenderer ? (
+                dmsRenderer(dms, selectedToAdd, onChange)
+            ) : null }
+
+            { noResults ? <span className="mx_AddExistingToSpace_noResults">
                 { _t("No results") }
             </span> : undefined }
         </AutoHideScrollbar>
 
-        <div className="mx_AddExistingToSpaceDialog_footer">
-            <span>
-                <div>{ _t("Don't want to add an existing room?") }</div>
-                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
-                    { _t("Create a new room") }
-                </AccessibleButton>
-            </span>
-
-            <AccessibleButton
-                kind="primary"
-                disabled={busy || selectedToAdd.size < 1}
-                onClick={async () => {
-                    setBusy(true);
-                    try {
-                        await allSettled(Array.from(selectedToAdd).map((room) =>
-                            SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
-                        onFinished(true);
-                    } catch (e) {
-                        console.error("Failed to add rooms to space", e);
-                        setError(_t("Failed to add rooms to space"));
-                    }
-                    setBusy(false);
-                }}
-            >
-                { busy ? _t("Adding...") : _t("Add") }
-            </AccessibleButton>
+        <div className="mx_AddExistingToSpace_footer">
+            { footer }
         </div>
+    </div>;
+};
+
+export const defaultRoomsRenderer: IAddExistingToSpaceProps["roomsRenderer"] = (
+    rooms, selectedToAdd, onChange, truncateAt, overflowTile,
+) => (
+    <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: boolean) => {
+                        onChange(checked, room);
+                    } : null}
+                />,
+            )}
+            getChildCount={() => rooms.length}
+        />
+    </div>
+);
+
+export const defaultSpacesRenderer: IAddExistingToSpaceProps["spacesRenderer"] = (spaces, selectedToAdd, onChange) => (
+    <div className="mx_AddExistingToSpace_section">
+        { spaces.map(space => {
+            return <Entry
+                key={space.roomId}
+                room={space}
+                checked={selectedToAdd.has(space)}
+                onChange={onChange ? (checked) => {
+                    onChange(checked, space);
+                } : null}
+            />;
+        }) }
+    </div>
+);
+
+export const defaultDmsRenderer: IAddExistingToSpaceProps["dmsRenderer"] = (dms, selectedToAdd, onChange) => (
+    <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: boolean) => {
+                    onChange(checked, room);
+                } : null}
+            />;
+        }) }
+    </div>
+);
+
+interface ISubspaceSelectorProps {
+    title: string;
+    space: Room;
+    value: Room;
+    onChange(space: Room): void;
+}
+
+export const SubspaceSelector = ({ title, space, value, onChange }: ISubspaceSelectorProps) => {
+    const options = useMemo(() => {
+        return [space, ...SpaceStore.instance.getChildSpaces(space.roomId).filter(space => {
+            return space.currentState.maySendStateEvent(EventType.SpaceChild, space.client.credentials.userId);
+        })];
+    }, [space]);
+
+    let body;
+    if (options.length > 1) {
+        body = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                className="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    onChange(options.find(space => space.roomId === key) || space);
+                }}
+                value={value.roomId}
+                label={_t("Space selection")}
+            >
+                { options.map((space) => {
+                    const classes = classNames({
+                        mx_SubspaceSelector_dropdownOptionActive: space === value,
+                    });
+                    return <div key={space.roomId} className={classes}>
+                        <RoomAvatar room={space} width={24} height={24} />
+                        { space.name || getDisplayAliasForRoom(space) || space.roomId }
+                    </div>;
+                }) }
+            </Dropdown>
+        );
+    } else {
+        body = (
+            <div className="mx_SubspaceSelector_onlySpace">
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>
+        );
+    }
+
+    return <div className="mx_SubspaceSelector">
+        <RoomAvatar room={value} height={40} width={40} />
+        <div>
+            <h1>{ title }</h1>
+            { body }
+        </div>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ space, onCreateRoomClick, onAddSubspaceClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+
+    return <BaseDialog
+        title={(
+            <SubspaceSelector
+                title={_t("Add existing rooms")}
+                space={space}
+                value={selectedSpace}
+                onChange={setSelectedSpace}
+            />
+        )}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpace"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={space.client}>
+            <AddExistingToSpace
+                space={space}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new room instead?") }</div>
+                    <AccessibleButton
+                        kind="link"
+                        onClick={() => {
+                            onCreateRoomClick();
+                            onFinished();
+                        }}
+                    >
+                        { _t("Create a new room") }
+                    </AccessibleButton>
+                </>}
+                filterPlaceholder={_t("Search for rooms")}
+                roomsRenderer={defaultRoomsRenderer}
+                spacesRenderer={() => (
+                    <div className="mx_AddExistingToSpace_section">
+                        <h3>{ _t("Spaces") }</h3>
+                        <AccessibleButton
+                            kind="link"
+                            onClick={() => {
+                                onAddSubspaceClick();
+                                onFinished();
+                            }}
+                        >
+                            { _t("Adding spaces has moved.") }
+                        </AccessibleButton>
+                    </div>
+                )}
+                dmsRenderer={defaultDmsRenderer}
+            />
+        </MatrixClientContext.Provider>
     </BaseDialog>;
 };
 

src/components/views/dialogs/AddressPickerDialog.tsx

@@ -17,23 +17,25 @@ 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 React, { createRef } from 'react';
+import { sleep } from "matrix-js-sdk/src/utils";
 
 import { _t, _td } from '../../../languageHandler';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
-import { addressTypes, getAddressType } from '../../../UserAddress.js';
+import { AddressType, addressTypes, getAddressType, IUserAddress } from '../../../UserAddress';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
 import IdentityAuthClient from '../../../IdentityAuthClient';
 import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../utils/IdentityServerUtils';
 import { abbreviateUrl } from '../../../utils/UrlUtils';
-import {sleep} from "../../../utils/promise";
-import {Key} from "../../../Keyboard";
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AddressSelector from '../elements/AddressSelector';
+import AddressTile from '../elements/AddressTile';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -44,29 +46,64 @@ const addressTypeName = {
     'email': _td("email address"),
 };
 
-@replaceableComponent("views.dialogs.AddressPickerDialog")
-export default class AddressPickerDialog extends React.Component {
-    static propTypes = {
-        title: PropTypes.string.isRequired,
-        description: PropTypes.node,
-        // Extra node inserted after picker input, dropdown and errors
-        extraNode: PropTypes.node,
-        value: PropTypes.string,
-        placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-        roomId: PropTypes.string,
-        button: PropTypes.string,
-        focus: PropTypes.bool,
-        validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
-        onFinished: PropTypes.func.isRequired,
-        groupId: PropTypes.string,
-        // The type of entity to search for. Default: 'user'.
-        pickerType: PropTypes.oneOf(['user', 'room']),
-        // Whether the current user should be included in the addresses returned. Only
-        // applicable when pickerType is `user`. Default: false.
-        includeSelf: PropTypes.bool,
-    };
+interface IResult {
+    user_id: string; // eslint-disable-line camelcase
+    room_id?: string; // eslint-disable-line camelcase
+    name?: string;
+    display_name?: string; // eslint-disable-line camelcase
+    avatar_url?: string;// eslint-disable-line camelcase
+}
 
-    static defaultProps = {
+interface IProps {
+    title: string;
+    description?: JSX.Element;
+    // Extra node inserted after picker input, dropdown and errors
+    extraNode?: JSX.Element;
+    value?: string;
+    placeholder?: ((validAddressTypes: any) => string) | string;
+    roomId?: string;
+    button?: string;
+    focus?: boolean;
+    validAddressTypes?: AddressType[];
+    onFinished: (success: boolean, list?: IUserAddress[]) => void;
+    groupId?: string;
+    // The type of entity to search for. Default: 'user'.
+    pickerType?: 'user' | 'room';
+    // Whether the current user should be included in the addresses returned. Only
+    // applicable when pickerType is `user`. Default: false.
+    includeSelf?: boolean;
+}
+
+interface IState {
+    // Whether to show an error message because of an invalid address
+    invalidAddressError: boolean;
+    // List of UserAddressType objects representing
+    // the list of addresses we're going to invite
+    selectedList: IUserAddress[];
+    // Whether a search is ongoing
+    busy: boolean;
+    // An error message generated during the user directory search
+    searchError: string;
+    // Whether the server supports the user_directory API
+    serverSupportsUserDirectory: boolean;
+    // The query being searched for
+    query: string;
+    // List of UserAddressType objects representing the set of
+    // auto-completion results for the current search query.
+    suggestedList: IUserAddress[];
+    // List of address types initialised from props, but may change while the
+    // dialog is open and represents the supported list of address types at this time.
+    validAddressTypes: AddressType[];
+}
+
+@replaceableComponent("views.dialogs.AddressPickerDialog")
+export default class AddressPickerDialog extends React.Component<IProps, IState> {
+    private textinput = createRef<HTMLTextAreaElement>();
+    private addressSelector = createRef<AddressSelector>();
+    private queryChangedDebouncer: number;
+    private cancelThreepidLookup: () => void;
+
+    static defaultProps: Partial<IProps> = {
         value: "",
         focus: true,
         validAddressTypes: addressTypes,
@@ -74,36 +111,23 @@ export default class AddressPickerDialog extends React.Component {
         includeSelf: false,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this._textinput = createRef();
-
         let validAddressTypes = this.props.validAddressTypes;
         // Remove email from validAddressTypes if no IS is configured. It may be added at a later stage by the user
-        if (!MatrixClientPeg.get().getIdentityServerUrl() && validAddressTypes.includes("email")) {
-            validAddressTypes = validAddressTypes.filter(type => type !== "email");
+        if (!MatrixClientPeg.get().getIdentityServerUrl() && validAddressTypes.includes(AddressType.Email)) {
+            validAddressTypes = validAddressTypes.filter(type => type !== AddressType.Email);
         }
 
         this.state = {
-            // Whether to show an error message because of an invalid address
             invalidAddressError: false,
-            // List of UserAddressType objects representing
-            // the list of addresses we're going to invite
             selectedList: [],
-            // Whether a search is ongoing
             busy: false,
-            // An error message generated during the user directory search
             searchError: null,
-            // Whether the server supports the user_directory API
             serverSupportsUserDirectory: true,
-            // The query being searched for
             query: "",
-            // List of UserAddressType objects representing the set of
-            // auto-completion results for the current search query.
             suggestedList: [],
-            // List of address types initialised from props, but may change while the
-            // dialog is open and represents the supported list of address types at this time.
             validAddressTypes,
         };
     }
@@ -111,11 +135,11 @@ export default class AddressPickerDialog extends React.Component {
     componentDidMount() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
-            this._textinput.current.value = this.props.value;
+            this.textinput.current.value = this.props.value;
         }
     }
 
-    getPlaceholder() {
+    private getPlaceholder(): string {
         const { placeholder } = this.props;
         if (typeof placeholder === "string") {
             return placeholder;
@@ -124,23 +148,23 @@ export default class AddressPickerDialog extends React.Component {
         return placeholder(this.state.validAddressTypes);
     }
 
-    onButtonClick = () => {
+    private onButtonClick = (): void => {
         let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local selectedList
-        if (this._textinput.current.value !== '') {
-            selectedList = this._addAddressesToList([this._textinput.current.value]);
+        if (this.textinput.current.value !== '') {
+            selectedList = this.addAddressesToList([this.textinput.current.value]);
             if (selectedList === null) return;
         }
         this.props.onFinished(true, selectedList);
     };
 
-    onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    onKeyDown = e => {
-        const textInput = this._textinput.current ? this._textinput.current.value : undefined;
+    private onKeyDown = (e: React.KeyboardEvent): void => {
+        const textInput = this.textinput.current ? this.textinput.current.value : undefined;
 
         if (e.key === Key.ESCAPE) {
             e.stopPropagation();
@@ -149,15 +173,15 @@ export default class AddressPickerDialog extends React.Component {
         } else if (e.key === Key.ARROW_UP) {
             e.stopPropagation();
             e.preventDefault();
-            if (this.addressSelector) this.addressSelector.moveSelectionUp();
+            if (this.addressSelector.current) this.addressSelector.current.moveSelectionUp();
         } else if (e.key === Key.ARROW_DOWN) {
             e.stopPropagation();
             e.preventDefault();
-            if (this.addressSelector) this.addressSelector.moveSelectionDown();
+            if (this.addressSelector.current) this.addressSelector.current.moveSelectionDown();
         } else if (this.state.suggestedList.length > 0 && [Key.COMMA, Key.ENTER, Key.TAB].includes(e.key)) {
             e.stopPropagation();
             e.preventDefault();
-            if (this.addressSelector) this.addressSelector.chooseSelection();
+            if (this.addressSelector.current) this.addressSelector.current.chooseSelection();
         } else if (textInput.length === 0 && this.state.selectedList.length && e.key === Key.BACKSPACE) {
             e.stopPropagation();
             e.preventDefault();
@@ -169,17 +193,17 @@ export default class AddressPickerDialog extends React.Component {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
-                this._addAddressesToList([textInput]);
+                this.addAddressesToList([textInput]);
             }
         } else if (textInput && (e.key === Key.COMMA || e.key === Key.TAB)) {
             e.stopPropagation();
             e.preventDefault();
-            this._addAddressesToList([textInput]);
+            this.addAddressesToList([textInput]);
         }
     };
 
-    onQueryChanged = ev => {
-        const query = ev.target.value;
+    private onQueryChanged = (ev: React.ChangeEvent): void => {
+        const query = (ev.target as HTMLTextAreaElement).value;
         if (this.queryChangedDebouncer) {
             clearTimeout(this.queryChangedDebouncer);
         }
@@ -188,17 +212,17 @@ export default class AddressPickerDialog extends React.Component {
             this.queryChangedDebouncer = setTimeout(() => {
                 if (this.props.pickerType === 'user') {
                     if (this.props.groupId) {
-                        this._doNaiveGroupSearch(query);
+                        this.doNaiveGroupSearch(query);
                     } else if (this.state.serverSupportsUserDirectory) {
-                        this._doUserDirectorySearch(query);
+                        this.doUserDirectorySearch(query);
                     } else {
-                        this._doLocalSearch(query);
+                        this.doLocalSearch(query);
                     }
                 } else if (this.props.pickerType === 'room') {
                     if (this.props.groupId) {
-                        this._doNaiveGroupRoomSearch(query);
+                        this.doNaiveGroupRoomSearch(query);
                     } else {
-                        this._doRoomSearch(query);
+                        this.doRoomSearch(query);
                     }
                 } else {
                     console.error('Unknown pickerType', this.props.pickerType);
@@ -213,7 +237,7 @@ export default class AddressPickerDialog extends React.Component {
         }
     };
 
-    onDismissed = index => () => {
+    private onDismissed = (index: number) => () => {
         const selectedList = this.state.selectedList.slice();
         selectedList.splice(index, 1);
         this.setState({
@@ -221,25 +245,21 @@ export default class AddressPickerDialog extends React.Component {
             suggestedList: [],
             query: "",
         });
-        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+        if (this.cancelThreepidLookup) this.cancelThreepidLookup();
     };
 
-    onClick = index => () => {
-        this.onSelected(index);
-    };
-
-    onSelected = index => {
+    private onSelected = (index: number): void => {
         const selectedList = this.state.selectedList.slice();
-        selectedList.push(this._getFilteredSuggestions()[index]);
+        selectedList.push(this.getFilteredSuggestions()[index]);
         this.setState({
             selectedList,
             suggestedList: [],
             query: "",
         });
-        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+        if (this.cancelThreepidLookup) this.cancelThreepidLookup();
     };
 
-    _doNaiveGroupSearch(query) {
+    private doNaiveGroupSearch(query: string): void {
         const lowerCaseQuery = query.toLowerCase();
         this.setState({
             busy: true,
@@ -260,7 +280,7 @@ export default class AddressPickerDialog extends React.Component {
                     display_name: u.displayname,
                 });
             });
-            this._processResults(results, query);
+            this.processResults(results, query);
         }).catch((err) => {
             console.error('Error whilst searching group rooms: ', err);
             this.setState({
@@ -273,7 +293,7 @@ export default class AddressPickerDialog extends React.Component {
         });
     }
 
-    _doNaiveGroupRoomSearch(query) {
+    private doNaiveGroupRoomSearch(query: string): void {
         const lowerCaseQuery = query.toLowerCase();
         const results = [];
         GroupStore.getGroupRooms(this.props.groupId).forEach((r) => {
@@ -289,13 +309,13 @@ export default class AddressPickerDialog extends React.Component {
                 name: r.name || r.canonical_alias,
             });
         });
-        this._processResults(results, query);
+        this.processResults(results, query);
         this.setState({
             busy: false,
         });
     }
 
-    _doRoomSearch(query) {
+    private doRoomSearch(query: string): void {
         const lowerCaseQuery = query.toLowerCase();
         const rooms = MatrixClientPeg.get().getRooms();
         const results = [];
@@ -346,13 +366,13 @@ export default class AddressPickerDialog extends React.Component {
             return a.rank - b.rank;
         });
 
-        this._processResults(sortedResults, query);
+        this.processResults(sortedResults, query);
         this.setState({
             busy: false,
         });
     }
 
-    _doUserDirectorySearch(query) {
+    private doUserDirectorySearch(query: string): void {
         this.setState({
             busy: true,
             query,
@@ -366,7 +386,7 @@ export default class AddressPickerDialog extends React.Component {
             if (this.state.query !== query) {
                 return;
             }
-            this._processResults(resp.results, query);
+            this.processResults(resp.results, query);
         }).catch((err) => {
             console.error('Error whilst searching user directory: ', err);
             this.setState({
@@ -377,7 +397,7 @@ export default class AddressPickerDialog extends React.Component {
                     serverSupportsUserDirectory: false,
                 });
                 // Do a local search immediately
-                this._doLocalSearch(query);
+                this.doLocalSearch(query);
             }
         }).then(() => {
             this.setState({
@@ -386,7 +406,7 @@ export default class AddressPickerDialog extends React.Component {
         });
     }
 
-    _doLocalSearch(query) {
+    private doLocalSearch(query: string): void {
         this.setState({
             query,
             searchError: null,
@@ -407,10 +427,10 @@ export default class AddressPickerDialog extends React.Component {
                 avatar_url: user.avatarUrl,
             });
         });
-        this._processResults(results, query);
+        this.processResults(results, query);
     }
 
-    _processResults(results, query) {
+    private processResults(results: IResult[], query: string): void {
         const suggestedList = [];
         results.forEach((result) => {
             if (result.room_id) {
@@ -457,7 +477,7 @@ export default class AddressPickerDialog extends React.Component {
         const addrType = getAddressType(query);
         if (this.state.validAddressTypes.includes(addrType)) {
             if (addrType === 'email' && !Email.looksValid(query)) {
-                this.setState({searchError: _t("That doesn't look like a valid email address")});
+                this.setState({ searchError: _t("That doesn't look like a valid email address") });
                 return;
             }
             suggestedList.unshift({
@@ -465,27 +485,27 @@ export default class AddressPickerDialog extends React.Component {
                 address: query,
                 isKnown: false,
             });
-            if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+            if (this.cancelThreepidLookup) this.cancelThreepidLookup();
             if (addrType === 'email') {
-                this._lookupThreepid(addrType, query);
+                this.lookupThreepid(addrType, query);
             }
         }
         this.setState({
             suggestedList,
             invalidAddressError: false,
         }, () => {
-            if (this.addressSelector) this.addressSelector.moveSelectionTop();
+            if (this.addressSelector.current) this.addressSelector.current.moveSelectionTop();
         });
     }
 
-    _addAddressesToList(addressTexts) {
+    private addAddressesToList(addressTexts: string[]): IUserAddress[] {
         const selectedList = this.state.selectedList.slice();
 
         let hasError = false;
         addressTexts.forEach((addressText) => {
             addressText = addressText.trim();
             const addrType = getAddressType(addressText);
-            const addrObj = {
+            const addrObj: IUserAddress = {
                 addressType: addrType,
                 address: addressText,
                 isKnown: false,
@@ -504,7 +524,6 @@ export default class AddressPickerDialog extends React.Component {
                 const room = MatrixClientPeg.get().getRoom(addrObj.address);
                 if (room) {
                     addrObj.displayName = room.name;
-                    addrObj.avatarMxc = room.avatarUrl;
                     addrObj.isKnown = true;
                 }
             }
@@ -518,17 +537,17 @@ export default class AddressPickerDialog extends React.Component {
             query: "",
             invalidAddressError: hasError ? true : this.state.invalidAddressError,
         });
-        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+        if (this.cancelThreepidLookup) this.cancelThreepidLookup();
         return hasError ? null : selectedList;
     }
 
-    async _lookupThreepid(medium, address) {
+    private async lookupThreepid(medium: AddressType, address: string): Promise<string> {
         let cancelled = false;
         // Note that we can't safely remove this after we're done
         // because we don't know that it's the same one, so we just
         // leave it: it's replacing the old one each time so it's
         // not like they leak.
-        this._cancelThreepidLookup = function() {
+        this.cancelThreepidLookup = function() {
             cancelled = true;
         };
 
@@ -570,29 +589,29 @@ export default class AddressPickerDialog extends React.Component {
         }
     }
 
-    _getFilteredSuggestions() {
+    private getFilteredSuggestions(): IUserAddress[] {
         // map addressType => set of addresses to avoid O(n*m) operation
         const selectedAddresses = {};
-        this.state.selectedList.forEach(({address, addressType}) => {
+        this.state.selectedList.forEach(({ address, addressType }) => {
             if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
             selectedAddresses[addressType].add(address);
         });
 
         // Filter out any addresses in the above already selected addresses (matching both type and address)
-        return this.state.suggestedList.filter(({address, addressType}) => {
+        return this.state.suggestedList.filter(({ address, addressType }) => {
             return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
         });
     }
 
-    _onPaste = e => {
+    private onPaste = (e: React.ClipboardEvent): void => {
         // Prevent the text being pasted into the textarea
         e.preventDefault();
         const text = e.clipboardData.getData("text");
         // Process it as a list of addresses to add instead
-        this._addAddressesToList(text.split(/[\s,]+/));
+        this.addAddressesToList(text.split(/[\s,]+/));
     };
 
-    onUseDefaultIdentityServerClick = e => {
+    private onUseDefaultIdentityServerClick = (e: React.MouseEvent): void => {
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
@@ -601,33 +620,27 @@ export default class AddressPickerDialog extends React.Component {
 
         // Add email as a valid address type.
         const { validAddressTypes } = this.state;
-        validAddressTypes.push('email');
+        validAddressTypes.push(AddressType.Email);
         this.setState({ validAddressTypes });
     };
 
-    onManageSettingsClick = e => {
+    private onManageSettingsClick = (e: React.MouseEvent): void => {
         e.preventDefault();
         dis.fire(Action.ViewUserSettings);
         this.onCancel();
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const AddressSelector = sdk.getComponent("elements.AddressSelector");
-        this.scrollElement = null;
-
         let inputLabel;
         if (this.props.description) {
             inputLabel = <div className="mx_AddressPickerDialog_label">
-                <label htmlFor="textinput">{this.props.description}</label>
+                <label htmlFor="textinput">{ this.props.description }</label>
             </div>;
         }
 
         const query = [];
         // create the invite list
         if (this.state.selectedList.length > 0) {
-            const AddressTile = sdk.getComponent("elements.AddressTile");
             for (let i = 0; i < this.state.selectedList.length; i++) {
                 query.push(
                     <AddressTile
@@ -644,19 +657,19 @@ export default class AddressPickerDialog extends React.Component {
         query.push(
             <textarea
                 key={this.state.selectedList.length}
-                onPaste={this._onPaste}
-                rows="1"
+                onPaste={this.onPaste}
+                rows={1}
                 id="textinput"
-                ref={this._textinput}
+                ref={this.textinput}
                 className="mx_AddressPickerDialog_input"
                 onChange={this.onQueryChanged}
                 placeholder={this.getPlaceholder()}
                 defaultValue={this.props.value}
-                autoFocus={this.props.focus}>
-            </textarea>,
+                autoFocus={this.props.focus}
+            />,
         );
 
-        const filteredSuggestedList = this._getFilteredSuggestions();
+        const filteredSuggestedList = this.getFilteredSuggestions();
 
         let error;
         let addressSelector;
@@ -675,7 +688,7 @@ export default class AddressPickerDialog extends React.Component {
             error = <div className="mx_AddressPickerDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
-                <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
+                <AddressSelector ref={this.addressSelector}
                     addressList={filteredSuggestedList}
                     showAddress={this.props.pickerType === 'user'}
                     onSelected={this.onSelected}
@@ -686,11 +699,11 @@ export default class AddressPickerDialog extends React.Component {
 
         let identityServer;
         // If picker cannot currently accept e-mail but should be able to
-        if (this.props.pickerType === 'user' && !this.state.validAddressTypes.includes('email')
-            && this.props.validAddressTypes.includes('email')) {
+        if (this.props.pickerType === 'user' && !this.state.validAddressTypes.includes(AddressType.Email)
+            && this.props.validAddressTypes.includes(AddressType.Email)) {
             const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
             if (defaultIdentityServerUrl) {
-                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
                     "Use an identity server to invite by email. " +
                     "<default>Use the default (%(defaultIdentityServerName)s)</default> " +
                     "or manage in <settings>Settings</settings>.",
@@ -698,25 +711,29 @@ export default class AddressPickerDialog extends React.Component {
                         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>;
+                ) }</div>;
             } else {
-                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
                     "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>;
+                ) }</div>;
             }
         }
 
         return (
-            <BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
-                onFinished={this.props.onFinished} title={this.props.title}>
-                {inputLabel}
+            <BaseDialog
+                className="mx_AddressPickerDialog"
+                onKeyDown={this.onKeyDown}
+                onFinished={this.props.onFinished}
+                title={this.props.title}
+            >
+                { inputLabel }
                 <div className="mx_Dialog_content">
                     <div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
                     { error }

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -15,65 +15,66 @@ 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";
+import BaseDialog from "./BaseDialog";
+
+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() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
+    public render() {
         const errorList = this.props.unknownProfileUsers
-            .map(address => <li key={address.userId}>{address.userId}: {address.errorText}</li>);
+            .map(address => <li key={address.userId}>{ address.userId }: { address.errorText }</li>);
 
         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'>
-                    <p>{_t("Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?")}</p>
+                    <p>{ _t("Unable to find profiles for the Matrix IDs listed below - " +
+                        "would you like to invite them anyway?") }</p>
                     <ul>
                         { errorList }
                     </ul>
                 </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/BaseDialog.js

@@ -23,10 +23,10 @@ import classNames from 'classnames';
 
 import { Key } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Basic container for modal dialogs.
@@ -118,9 +118,7 @@ export default class BaseDialog extends React.Component {
 
         let headerImage;
         if (this.props.headerImage) {
-            headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage}
-                alt=""
-            />;
+            headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage} alt="" />;
         }
 
         return (
@@ -149,7 +147,7 @@ export default class BaseDialog extends React.Component {
                         'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
-                            {headerImage}
+                            { headerImage }
                             { this.props.title }
                         </div>
                         { this.props.headerButton }

src/components/views/dialogs/BetaFeedbackDialog.tsx

@@ -0,0 +1,61 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
+import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleButton from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "./UserSettingsDialog";
+import GenericFeatureFeedbackDialog from "./GenericFeatureFeedbackDialog";
+
+// XXX: Keep this around for re-use in future Betas
+
+interface IProps extends IDialogProps {
+    featureId: string;
+}
+
+const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+
+    return <GenericFeatureFeedbackDialog
+        title={_t("%(featureName)s beta feedback", { featureName: info.title })}
+        subheading={_t(info.feedbackSubheading)}
+        onFinished={onFinished}
+        rageshakeLabel={info.feedbackLabel}
+        rageshakeData={Object.fromEntries((SettingsStore.getBetaInfo(featureId)?.extraSettings || []).map(k => {
+            return SettingsStore.getValue(k);
+        }))}
+    >
+        <AccessibleButton
+            kind="link"
+            onClick={() => {
+                onFinished(false);
+                defaultDispatcher.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.Labs,
+                });
+            }}
+        >
+            { _t("To leave the beta, visit your settings.") }
+        </AccessibleButton>
+    </GenericFeatureFeedbackDialog>;
+};
+
+export default BetaFeedbackDialog;

src/components/views/dialogs/BugReportDialog.tsx

@@ -18,17 +18,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import sendBugReport, {downloadBugReport} from '../../../rageshake/submit-rageshake';
+import sendBugReport, { downloadBugReport } from '../../../rageshake/submit-rageshake';
 import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import QuestionDialog from "./QuestionDialog";
+import BaseDialog from "./BaseDialog";
+import Field from '../elements/Field';
+import Spinner from "../elements/Spinner";
+import DialogButtons from "../elements/DialogButtons";
+import { sendSentryReport } from "../../../sentry";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+    initialText?: string;
+    label?: string;
+    error?: Error;
+}
+
+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 +65,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,17 +89,16 @@ 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
                 Modal.createTrackedDialog('Bug report sent', '', QuestionDialog, {
                     title: _t('Logs sent'),
@@ -91,7 +107,7 @@ export default class BugReportDialog extends React.Component {
                 });
             }
         }, (err) => {
-            if (!this._unmounted) {
+            if (!this.unmounted) {
                 this.setState({
                     busy: false,
                     progress: null,
@@ -99,16 +115,18 @@ export default class BugReportDialog extends React.Component {
                 });
             }
         });
-    }
 
-    _onDownload = async (ev) => {
+        sendSentryReport(this.state.text, this.state.issueUrl, this.props.error);
+    };
+
+    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 +135,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,42 +144,33 @@ 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() {
-        const Loader = sdk.getComponent("elements.Spinner");
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Field = sdk.getComponent('elements.Field');
+    };
 
+    public render() {
         let error = null;
         if (this.state.err) {
             error = <div className="error">
-                {this.state.err}
+                { this.state.err }
             </div>;
         }
 
@@ -169,8 +178,8 @@ export default class BugReportDialog extends React.Component {
         if (this.state.busy) {
             progress = (
                 <div className="progress">
-                    <Loader />
-                    {this.state.progress} ...
+                    <Spinner />
+                    { this.state.progress } ...
                 </div>
             );
         }
@@ -183,8 +192,10 @@ export default class BugReportDialog extends React.Component {
         }
 
         return (
-            <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
-                    title={_t('Submit debug logs')}
+            <BaseDialog
+                className="mx_BugReportDialog"
+                onFinished={this.onCancel}
+                title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
@@ -193,8 +204,8 @@ export default class BugReportDialog extends React.Component {
                         { _t(
                             "Debug logs contain application usage data including your " +
                             "username, the IDs or aliases of the rooms or groups you " +
-                            "have visited and the usernames of other users. They do " +
-                            "not contain messages.",
+                            "have visited, which UI elements you last interacted with, " +
+                            "and the usernames of other users. They do not contain messages.",
                         ) }
                     </p>
                     <p><b>
@@ -204,7 +215,7 @@ export default class BugReportDialog extends React.Component {
                             {
                                 a: (sub) => <a
                                     target="_blank"
-                                    href="https://github.com/vector-im/element-web/issues/new"
+                                    href="https://github.com/vector-im/element-web/issues/new/choose"
                                 >
                                     { sub }
                                 </a>,
@@ -213,17 +224,17 @@ 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>}
+                        { this.state.downloadProgress && <span>{ this.state.downloadProgress } ...</span> }
                     </div>
 
                     <Field
                         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 +243,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 " +
@@ -241,21 +252,16 @@ export default class BugReportDialog extends React.Component {
                             "please include those things here.",
                         )}
                     />
-                    {progress}
-                    {error}
+                    { progress }
+                    { 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,27 @@ 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';
+import QuestionDialog from "./QuestionDialog";
+import Spinner from "../elements/Spinner";
+
+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;
@@ -44,25 +50,22 @@ export default class ChangelogDialog extends React.Component {
                     this.setState({ [REPOS[i]]: response.statusText });
                     return;
                 }
-                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+                this.setState({ [REPOS[i]]: JSON.parse(body).commits });
             });
         }
     }
 
-    _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">
-                    {commit.commit.message.split('\n')[0]}
+                    { commit.commit.message.split('\n')[0] }
                 </a>
             </li>
         );
     }
 
-    render() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-
+    public render() {
         const logs = REPOS.map(repo => {
             let content;
             if (this.state[repo] == null) {
@@ -72,36 +75,29 @@ 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}>
-                    <h2>{repo}</h2>
-                    <ul>{content}</ul>
+                    <h2>{ repo }</h2>
+                    <ul>{ content }</ul>
                 </div>
             );
         });
 
         const content = (
             <div className="mx_ChangelogDialog_content">
-                {this.props.version == null || this.props.newVersion == null ? <h2>{_t("Unavailable")}</h2> : logs}
+                { this.props.version == null || this.props.newVersion == null ? <h2>{ _t("Unavailable") }</h2> : logs }
             </div>
         );
 
-
         return (
             <QuestionDialog
                 title={_t("Changelog")}
                 description={content}
                 button={_t("Update")}
                 onFinished={this.props.onFinished}
-                />
+            />
         );
     }
 }
-
-ChangelogDialog.propTypes = {
-    version: PropTypes.string.isRequired,
-    newVersion: PropTypes.string.isRequired,
-    onFinished: PropTypes.func.isRequired,
-};

src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx

@@ -26,12 +26,12 @@ import SdkConfig from "../../../SdkConfig";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import InviteDialog from "./InviteDialog";
 import BaseAvatar from "../avatars/BaseAvatar";
-import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
+import { inviteMultipleToRoom, showAnyInviteErrors } from "../../../RoomInvite";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     roomId: string;
@@ -86,7 +86,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         ev.preventDefault();
         ev.stopPropagation();
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             const targets = [...this.state.emailTargets, ...this.state.userTargets];
             const result = await inviteMultipleToRoom(this.props.roomId, targets);
@@ -95,10 +95,10 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
             if (success) {
                 this.props.onFinished(true);
             } else {
-                this.setState({busy: false});
+                this.setState({ busy: false });
             }
         } catch (e) {
-            this.setState({busy: false});
+            this.setState({ busy: false });
             console.error(e);
             Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
                 title: _t("Failed to invite"),
@@ -114,7 +114,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         } else {
             targets[index] = ev.target.value;
         }
-        this.setState({emailTargets: targets});
+        this.setState({ emailTargets: targets });
     };
 
     private onAddressBlur = (index: number) => {
@@ -122,12 +122,12 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         if (index >= targets.length) return; // not important
         if (targets[index].trim() === "") {
             targets.splice(index, 1);
-            this.setState({emailTargets: targets});
+            this.setState({ emailTargets: targets });
         }
     };
 
     private onShowPeopleClick = () => {
-        this.setState({showPeople: !this.state.showPeople});
+        this.setState({ showPeople: !this.state.showPeople });
     };
 
     private setPersonToggle = (person: IPerson, selected: boolean) => {
@@ -137,7 +137,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         } else if (!selected && targets.includes(person.userId)) {
             targets.splice(targets.indexOf(person.userId), 1);
         }
-        this.setState({userTargets: targets});
+        this.setState({ userTargets: targets });
     };
 
     private renderPerson(person: IPerson, key: any) {
@@ -156,8 +156,8 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
                     height={avatarSize}
                 />
                 <div className="mx_CommunityPrototypeInviteDialog_personIdentifiers">
-                    <span className="mx_CommunityPrototypeInviteDialog_personName">{person.user.name}</span>
-                    <span className="mx_CommunityPrototypeInviteDialog_personId">{person.userId}</span>
+                    <span className="mx_CommunityPrototypeInviteDialog_personName">{ person.user.name }</span>
+                    <span className="mx_CommunityPrototypeInviteDialog_personId">{ person.userId }</span>
                 </div>
                 <StyledCheckbox onChange={(e) => this.setPersonToggle(person, e.target.checked)} />
             </div>
@@ -165,7 +165,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
     }
 
     private onShowMorePeople = () => {
-        this.setState({numPeople: this.state.numPeople + 5}); // arbitrary increase
+        this.setState({ numPeople: this.state.numPeople + 5 }); // arbitrary increase
     };
 
     public render() {
@@ -187,7 +187,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         emailAddresses.push((
             <Field
                 key={emailAddresses.length}
-                value={""}
+                value=""
                 onChange={(e) => this.onAddressChange(e, emailAddresses.length)}
                 label={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
                 placeholder={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
@@ -205,18 +205,21 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
                 people.push((
                     <AccessibleButton
                         onClick={this.onShowMorePeople}
-                        kind="link" key="more"
+                        kind="link"
+                        key="more"
                         className="mx_CommunityPrototypeInviteDialog_morePeople"
-                    >{_t("Show more")}</AccessibleButton>
+                    >
+                        { _t("Show more") }
+                    </AccessibleButton>
                 ));
             }
         }
         if (this.state.people.length > 0) {
             peopleIntro = (
                 <div className="mx_CommunityPrototypeInviteDialog_people">
-                    <span>{_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})}</span>
+                    <span>{ _t("People you know on %(brand)s", { brand: SdkConfig.get().brand }) }</span>
                     <AccessibleButton onClick={this.onShowPeopleClick}>
-                        {this.state.showPeople ? _t("Hide") : _t("Show")}
+                        { this.state.showPeople ? _t("Hide") : _t("Show") }
                     </AccessibleButton>
                 </div>
             );
@@ -225,25 +228,28 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         let buttonText = _t("Skip");
         const targetCount = this.state.userTargets.length + this.state.emailTargets.length;
         if (targetCount > 0) {
-            buttonText = _t("Send %(count)s invites", {count: targetCount});
+            buttonText = _t("Send %(count)s invites", { count: targetCount });
         }
 
         return (
             <BaseDialog
                 className="mx_CommunityPrototypeInviteDialog"
                 onFinished={this.props.onFinished}
-                title={_t("Invite people to join %(communityName)s", {communityName: this.props.communityName})}
+                title={_t("Invite people to join %(communityName)s", { communityName: this.props.communityName })}
             >
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_Dialog_content">
-                        {emailAddresses}
-                        {peopleIntro}
-                        {people}
+                        { emailAddresses }
+                        { peopleIntro }
+                        { people }
                         <AccessibleButton
-                            kind="primary" onClick={this.onSubmit}
+                            kind="primary"
+                            onClick={this.onSubmit}
                             disabled={this.state.busy}
                             className="mx_CommunityPrototypeInviteDialog_primaryButton"
-                        >{buttonText}</AccessibleButton>
+                        >
+                            { buttonText }
+                        </AccessibleButton>
                     </div>
                 </form>
             </BaseDialog>

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -15,9 +15,22 @@ 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";
+import ConfirmRedactDialog from './ConfirmRedactDialog';
+import ErrorDialog from './ErrorDialog';
+import BaseDialog from "./BaseDialog";
+import Spinner from "../elements/Spinner";
+
+interface IProps {
+    redact: () => Promise<void>;
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    isRedacting: boolean;
+    redactionErrorCode: string | number;
+}
 
 /*
  * A dialog for confirming a redaction.
@@ -32,7 +45,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,16 +54,16 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
         };
     }
 
-    onParentFinished = async (proceed) => {
+    public onParentFinished = async (proceed: boolean): Promise<void> => {
         if (proceed) {
-            this.setState({isRedacting: true});
+            this.setState({ isRedacting: true });
             try {
                 await this.props.redact();
                 this.props.onFinished(true);
             } catch (error) {
                 const code = error.errcode || error.statusCode;
                 if (typeof code !== "undefined") {
-                    this.setState({redactionErrorCode: code});
+                    this.setState({ redactionErrorCode: code });
                 } else {
                     this.props.onFinished(true);
                 }
@@ -60,21 +73,18 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
         }
     };
 
-    render() {
+    public render() {
         if (this.state.isRedacting) {
             if (this.state.redactionErrorCode) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 const code = this.state.redactionErrorCode;
                 return (
                     <ErrorDialog
                         onFinished={this.props.onFinished}
                         title={_t('Error')}
-                        description={_t('You cannot delete this message. (%(code)s)', {code})}
+                        description={_t('You cannot delete this message. (%(code)s)', { code })}
                     />
                 );
             } else {
-                const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
-                const Spinner = sdk.getComponent('elements.Spinner');
                 return (
                     <BaseDialog
                         onFinished={this.props.onFinished}
@@ -85,7 +95,6 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
                 );
             }
         } else {
-            const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
             return <ConfirmRedactDialog onFinished={this.onParentFinished} />;
         }
     }

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -15,17 +15,20 @@ 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";
+import TextInputDialog from "./TextInputDialog";
+
+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 (
             <TextInputDialog onFinished={this.props.onFinished}
                 title={_t("Confirm Removal")}
@@ -34,8 +37,8 @@ export default class ConfirmRedactDialog extends React.Component {
                        "Note that if you delete a room name or topic change, it could undo the change.")}
                 placeholder={_t("Reason (optional)")}
                 focus
-                button={_t("Remove")}>
-            </TextInputDialog>
+                button={_t("Remove")}
+            />
         );
     }
 }

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -15,13 +15,34 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import * as sdk from '../../../index';
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 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";
+import MemberAvatar from '../avatars/MemberAvatar';
+import BaseAvatar from '../avatars/BaseAvatar';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+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,58 +53,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() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
-        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
-
+    public render() {
         const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
@@ -92,7 +78,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}
                         />
@@ -118,7 +104,9 @@ export default class ConfirmUserActionDialog extends React.Component {
         }
 
         return (
-            <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
+            <BaseDialog
+                className="mx_ConfirmUserActionDialog"
+                onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
             >

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -15,47 +15,47 @@ 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";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
 
 @replaceableComponent("views.dialogs.ConfirmWipeDeviceDialog")
-export default class ConfirmWipeDeviceDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    _onConfirm = () => {
+export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
+    private onConfirm = (): void => {
         this.props.onFinished(true);
     };
 
-    _onDecline = () => {
+    private onDecline = (): void => {
         this.props.onFinished(false);
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         return (
-            <BaseDialog className='mx_ConfirmWipeDeviceDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Clear all data in this session?")}>
+            <BaseDialog
+                className='mx_ConfirmWipeDeviceDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Clear all data in this session?")}
+            >
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
-                        {_t(
+                        { _t(
                             "Clearing all data from this session is permanent. Encrypted messages will be lost " +
                             "unless their keys have been backed up.",
-                        )}
+                        ) }
                     </p>
                 </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/CreateCommunityPrototypeDialog.tsx

@@ -23,9 +23,9 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import InfoTooltip from "../elements/InfoTooltip";
 import dis from "../../../dispatcher/dispatcher";
-import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
+import { showCommunityRoomInviteDialog } from "../../../RoomInvite";
 import GroupStore from "../../../stores/GroupStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
@@ -58,7 +58,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
     private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
         const localpart = (ev.target.value || "").toLowerCase().replace(/[^a-z0-9.\-_]/g, '-');
-        this.setState({name: ev.target.value, localpart});
+        this.setState({ name: ev.target.value, localpart });
     };
 
     private onSubmit = async (ev) => {
@@ -69,7 +69,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
         // We'll create the community now to see if it's taken, leaving it active in
         // the background for the user to look at while they invite people.
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             let avatarUrl = ''; // must be a string for synapse to accept it
             if (this.state.avatarFile) {
@@ -85,7 +85,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
             });
 
             // Ensure the tag gets selected now that we've created it
-            dis.dispatch({action: 'deselect_tags'}, true);
+            dis.dispatch({ action: 'deselect_tags' }, true);
             dis.dispatch({
                 action: 'select_tag',
                 tag: result.group_id,
@@ -123,13 +123,13 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
     private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
         if (!e.target.files || !e.target.files.length) {
-            this.setState({avatarFile: null});
+            this.setState({ avatarFile: null });
         } else {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             const file = e.target.files[0];
             const reader = new FileReader();
             reader.onload = (ev: ProgressEvent<FileReader>) => {
-                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+                this.setState({ avatarFile: file, busy: false, avatarPreview: ev.target.result as string });
             };
             reader.readAsDataURL(file);
         }
@@ -144,11 +144,11 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
         if (this.state.localpart) {
             communityId = (
                 <span className="mx_CreateCommunityPrototypeDialog_communityId">
-                    {_t("Community ID: +<localpart />:%(domain)s", {
+                    { _t("Community ID: +<localpart />:%(domain)s", {
                         domain: MatrixClientPeg.getHomeserverName(),
                     }, {
-                        localpart: () => <u>{this.state.localpart}</u>,
-                    })}
+                        localpart: () => <u>{ this.state.localpart }</u>,
+                    }) }
                     <InfoTooltip
                         tooltip={_t(
                             "Use this when referencing your community to others. The community ID " +
@@ -161,21 +161,21 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
         let helpText = (
             <span className="mx_CreateCommunityPrototypeDialog_subtext">
-                {_t("You can change this later if needed.")}
+                { _t("You can change this later if needed.") }
             </span>
         );
         if (this.state.error) {
             const classes = "mx_CreateCommunityPrototypeDialog_subtext mx_CreateCommunityPrototypeDialog_subtext_error";
             helpText = (
                 <span className={classes}>
-                    {this.state.error}
+                    { this.state.error }
                 </span>
             );
         }
 
         let preview = <img src={this.state.avatarPreview} className="mx_CreateCommunityPrototypeDialog_avatar" />;
         if (!this.state.avatarPreview) {
-            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />
+            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />;
         }
 
         return (
@@ -193,31 +193,33 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
                                 placeholder={_t("Enter name")}
                                 label={_t("Enter name")}
                             />
-                            {helpText}
+                            { helpText }
                             <span className="mx_CreateCommunityPrototypeDialog_subtext">
-                                {/*nbsp is to reserve the height of this element when there's nothing*/}
-                                &nbsp;{communityId}
+                                { /*nbsp is to reserve the height of this element when there's nothing*/ }
+                                &nbsp;{ communityId }
                             </span>
                             <AccessibleButton kind="primary" onClick={this.onSubmit} disabled={this.state.busy}>
-                                {_t("Create")}
+                                { _t("Create") }
                             </AccessibleButton>
                         </div>
                         <div className="mx_CreateCommunityPrototypeDialog_colAvatar">
                             <input
-                                type="file" style={{display: "none"}}
-                                ref={this.avatarUploadRef} accept="image/*"
+                                type="file"
+                                style={{ display: "none" }}
+                                ref={this.avatarUploadRef}
+                                accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
                             <AccessibleButton
                                 onClick={this.onChangeAvatar}
                                 className="mx_CreateCommunityPrototypeDialog_avatarContainer"
                             >
-                                {preview}
+                                { preview }
                             </AccessibleButton>
                             <div className="mx_CreateCommunityPrototypeDialog_tip">
-                                <b>{_t("Add image (optional)")}</b>
+                                <b>{ _t("Add image (optional)") }</b>
                                 <span>
-                                    {_t("An image will help people identify your community.")}
+                                    { _t("An image will help people identify your community.") }
                                 </span>
                             </div>
                         </div>

src/components/views/dialogs/CreateGroupDialog.tsx

@@ -15,44 +15,52 @@ 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";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import Spinner from "../elements/Spinner";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    groupName: string;
+    groupId: string;
+    groupIdError: string;
+    creating: boolean;
+    createError: Error;
+}
 
 @replaceableComponent("views.dialogs.CreateGroupDialog")
-export default class CreateGroupDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    state = {
+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,16 +75,16 @@ 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;
         }
-        this.setState({creating: true});
+        this.setState({ creating: true });
         MatrixClientPeg.get().createGroup({
             localpart: this.state.groupId,
             profile: profile,
@@ -88,20 +96,17 @@ export default class CreateGroupDialog extends React.Component {
             });
             this.props.onFinished(true);
         }).catch((e) => {
-            this.setState({createError: e});
+            this.setState({ createError: e });
         }).finally(() => {
-            this.setState({creating: false});
+            this.setState({ creating: false });
         });
     };
 
-    _onCancel = () => {
+    private onCancel = () => {
         this.props.onFinished(false);
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('elements.Spinner');
-
         if (this.state.creating) {
             return <Spinner />;
         }
@@ -118,20 +123,25 @@ export default class CreateGroupDialog extends React.Component {
         }
 
         return (
-            <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
+            <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">
                                 <label htmlFor="groupname">{ _t('Community Name') }</label>
                             </div>
                             <div>
-                                <input id="groupname" className="mx_CreateGroupDialog_input"
-                                    autoFocus={true} size="64"
+                                <input
+                                    id="groupname"
+                                    className="mx_CreateGroupDialog_input"
+                                    autoFocus={true}
+                                    size={64}
                                     placeholder={_t('Example')}
-                                    onChange={this._onGroupNameChange}
+                                    onChange={this.onGroupNameChange}
                                     value={this.state.groupName}
                                 />
                             </div>
@@ -144,10 +154,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">
@@ -162,7 +172,7 @@ export default class CreateGroupDialog extends React.Component {
                     </div>
                     <div className="mx_Dialog_buttons">
                         <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
-                        <button onClick={this._onCancel}>
+                        <button onClick={this.onCancel}>
                             { _t("Cancel") }
                         </button>
                     </div>

src/components/views/dialogs/CreateRoomDialog.js

@@ -1,301 +0,0 @@
-/*
-Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
-
-import * as sdk from '../../../index';
-import SdkConfig from '../../../SdkConfig';
-import withValidation 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";
-
-@replaceableComponent("views.dialogs.CreateRoomDialog")
-export default class CreateRoomDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        defaultPublic: PropTypes.bool,
-        parentSpace: PropTypes.instanceOf(Room),
-    };
-
-    constructor(props) {
-        super(props);
-
-        const config = SdkConfig.get();
-        this.state = {
-            isPublic: this.props.defaultPublic || false,
-            isEncrypted: privateShouldBeEncrypted(),
-            name: "",
-            topic: "",
-            alias: "",
-            detailsOpen: false,
-            noFederate: config.default_federate === false,
-            nameIsValid: false,
-            canChangeEncryption: true,
-        };
-
-        MatrixClientPeg.get().doesServerForceEncryptionForPreset("private")
-            .then(isForced => this.setState({canChangeEncryption: !isForced}));
-    }
-
-    _roomCreateOptions() {
-        const opts = {};
-        const createOpts = opts.createOpts = {};
-        createOpts.name = this.state.name;
-        if (this.state.isPublic) {
-            createOpts.visibility = "public";
-            createOpts.preset = "public_chat";
-            opts.guestAccess = false;
-            const {alias} = this.state;
-            const localPart = alias.substr(1, alias.indexOf(":") - 1);
-            createOpts['room_alias_name'] = localPart;
-        }
-        if (this.state.topic) {
-            createOpts.topic = this.state.topic;
-        }
-        if (this.state.noFederate) {
-            createOpts.creation_content = {'m.federate': false};
-        }
-
-        if (!this.state.isPublic) {
-            if (this.state.canChangeEncryption) {
-                opts.encryption = this.state.isEncrypted;
-            } else {
-                // the server should automatically do this for us, but for safety
-                // we'll demand it too.
-                opts.encryption = true;
-            }
-        }
-
-        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
-        }
-
-        if (this.props.parentSpace) {
-            opts.parentSpace = this.props.parentSpace;
-        }
-
-        return opts;
-    }
-
-    componentDidMount() {
-        this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
-        // move focus to first field when showing dialog
-        this._nameFieldRef.focus();
-    }
-
-    componentWillUnmount() {
-        this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
-    }
-
-    _onKeyDown = event => {
-        if (event.key === Key.ENTER) {
-            this.onOk();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-
-    onOk = async () => {
-        const activeElement = document.activeElement;
-        if (activeElement) {
-            activeElement.blur();
-        }
-        await this._nameFieldRef.validate({allowEmpty: false});
-        if (this._aliasFieldRef) {
-            await this._aliasFieldRef.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());
-        } else {
-            let field;
-            if (!this.state.nameIsValid) {
-                field = this._nameFieldRef;
-            } else if (this._aliasFieldRef && !this._aliasFieldRef.isValid) {
-                field = this._aliasFieldRef;
-            }
-            if (field) {
-                field.focus();
-                field.validate({ allowEmpty: false, focused: true });
-            }
-        }
-    };
-
-    onCancel = () => {
-        this.props.onFinished(false);
-    };
-
-    onNameChange = ev => {
-        this.setState({name: ev.target.value});
-    };
-
-    onTopicChange = ev => {
-        this.setState({topic: ev.target.value});
-    };
-
-    onPublicChange = isPublic => {
-        this.setState({isPublic});
-    };
-
-    onEncryptedChange = isEncrypted => {
-        this.setState({isEncrypted});
-    };
-
-    onAliasChange = alias => {
-        this.setState({alias});
-    };
-
-    onDetailsToggled = ev => {
-        this.setState({detailsOpen: ev.target.open});
-    };
-
-    onNoFederateChange = noFederate => {
-        this.setState({noFederate});
-    };
-
-    collectDetailsRef = ref => {
-        this._detailsRef = ref;
-    };
-
-    onNameValidate = async fieldState => {
-        const result = await CreateRoomDialog._validateRoomName(fieldState);
-        this.setState({nameIsValid: result.valid});
-        return result;
-    };
-
-    static _validateRoomName = withValidation({
-        rules: [
-            {
-                key: "required",
-                test: async ({ value }) => !!value,
-                invalid: () => _t("Please enter a name for the room"),
-            },
-        ],
-    });
-
-    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} />
-                </div>
-            );
-        }
-
-        let publicPrivateLabel = <p>{_t(
-            "Private rooms can be found and joined by invitation only. Public rooms can be " +
-            "found and joined by anyone.",
-        )}</p>;
-        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            publicPrivateLabel = <p>{_t(
-                "Private rooms can be found and joined by invitation only. Public rooms can be " +
-                "found and joined by anyone in this community.",
-            )}</p>;
-        }
-
-        let e2eeSection;
-        if (!this.state.isPublic) {
-            let microcopy;
-            if (privateShouldBeEncrypted()) {
-                if (this.state.canChangeEncryption) {
-                    microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
-                } else {
-                    microcopy = _t("Your server requires encryption to be enabled in private rooms.");
-                }
-            } else {
-                microcopy = _t("Your server admin has disabled end-to-end encryption by default " +
-                    "in private rooms & Direct Messages.");
-            }
-            e2eeSection = <React.Fragment>
-                <LabelledToggleSwitch
-                    label={ _t("Enable end-to-end encryption")}
-                    onChange={this.onEncryptedChange}
-                    value={this.state.isEncrypted}
-                    className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
-                    disabled={!this.state.canChangeEncryption}
-                />
-                <p>{ microcopy }</p>
-            </React.Fragment>;
-        }
-
-        let federateLabel = _t(
-            "You might enable this if the room will only be used for collaborating with internal " +
-            "teams on your homeserver. This cannot be changed later.",
-        );
-        if (SdkConfig.get().default_federate === false) {
-            // We only change the label if the default setting is different to avoid jarring text changes to the
-            // user. They will have read the implications of turning this off/on, so no need to rephrase for them.
-            federateLabel = _t(
-                "You might disable this if the room will be used for collaborating with external " +
-                "teams who have their own homeserver. This cannot be changed later.",
-            );
-        }
-
-        let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
-        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
-            title = _t("Create a room in %(communityName)s", {communityName: name});
-        }
-        return (
-            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
-                title={title}
-            >
-                <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} />
-                        { 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>
-                            <LabelledToggleSwitch
-                                label={_t(
-                                    "Block anyone not part of %(serverName)s from ever joining this room.",
-                                    {serverName: MatrixClientPeg.getHomeserverName()},
-                                )}
-                                onChange={this.onNoFederateChange}
-                                value={this.state.noFederate}
-                            />
-                            <p>{federateLabel}</p>
-                        </details>
-                    </div>
-                </form>
-                <DialogButtons primaryButton={_t('Create Room')}
-                    onPrimaryButtonClick={this.onOk}
-                    onCancel={this.onCancel} />
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -0,0 +1,381 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+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.
+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, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
+
+import SdkConfig from '../../../SdkConfig';
+import withValidation, { IFieldState } from '../elements/Validation';
+import { _t } from '../../../languageHandler';
+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 SpaceStore from "../../../stores/SpaceStore";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+
+interface IProps {
+    defaultPublic?: boolean;
+    defaultName?: string;
+    parentSpace?: Room;
+    defaultEncrypted?: boolean;
+    onFinished(proceed: boolean, opts?: IOpts): void;
+}
+
+interface IState {
+    joinRule: JoinRule;
+    isPublic: boolean;
+    isEncrypted: boolean;
+    name: string;
+    topic: string;
+    alias: string;
+    detailsOpen: boolean;
+    noFederate: boolean;
+    nameIsValid: boolean;
+    canChangeEncryption: boolean;
+}
+
+@replaceableComponent("views.dialogs.CreateRoomDialog")
+export default class CreateRoomDialog extends React.Component<IProps, IState> {
+    private readonly supportsRestricted: boolean;
+    private nameField = createRef<Field>();
+    private aliasField = createRef<RoomAliasField>();
+
+    constructor(props) {
+        super(props);
+
+        this.supportsRestricted = this.props.parentSpace && !!SpaceStore.instance.restrictedJoinRuleSupport?.preferred;
+
+        let joinRule = JoinRule.Invite;
+        if (this.props.defaultPublic) {
+            joinRule = JoinRule.Public;
+        } else if (this.supportsRestricted) {
+            joinRule = JoinRule.Restricted;
+        }
+
+        const config = SdkConfig.get();
+        this.state = {
+            isPublic: this.props.defaultPublic || false,
+            isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(),
+            joinRule,
+            name: this.props.defaultName || "",
+            topic: "",
+            alias: "",
+            detailsOpen: false,
+            noFederate: config.default_federate === false,
+            nameIsValid: false,
+            canChangeEncryption: true,
+        };
+
+        MatrixClientPeg.get().doesServerForceEncryptionForPreset(Preset.PrivateChat)
+            .then(isForced => this.setState({ canChangeEncryption: !isForced }));
+    }
+
+    private roomCreateOptions() {
+        const opts: IOpts = {};
+        const createOpts: IOpts["createOpts"] = opts.createOpts = {};
+        createOpts.name = this.state.name;
+
+        if (this.state.joinRule === JoinRule.Public) {
+            createOpts.visibility = Visibility.Public;
+            createOpts.preset = Preset.PublicChat;
+            opts.guestAccess = false;
+            const { alias } = this.state;
+            createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1);
+        } else {
+            // If we cannot change encryption we pass `true` for safety, the server should automatically do this for us.
+            opts.encryption = this.state.canChangeEncryption ? this.state.isEncrypted : true;
+        }
+
+        if (this.state.topic) {
+            createOpts.topic = this.state.topic;
+        }
+        if (this.state.noFederate) {
+            createOpts.creation_content = { 'm.federate': false };
+        }
+
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+            opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
+        }
+
+        opts.parentSpace = this.props.parentSpace;
+        if (this.props.parentSpace && this.state.joinRule === JoinRule.Restricted) {
+            opts.joinRule = JoinRule.Restricted;
+        }
+
+        return opts;
+    }
+
+    componentDidMount() {
+        // move focus to first field when showing dialog
+        this.nameField.current.focus();
+    }
+
+    componentWillUnmount() {
+    }
+
+    private onKeyDown = (event: KeyboardEvent) => {
+        if (event.key === Key.ENTER) {
+            this.onOk();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    private onOk = async () => {
+        const activeElement = document.activeElement as HTMLElement;
+        if (activeElement) {
+            activeElement.blur();
+        }
+        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<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.nameField.current;
+            } else if (this.aliasField.current && !this.aliasField.current.isValid) {
+                field = this.aliasField.current;
+            }
+            if (field) {
+                field.focus();
+                field.validate({ allowEmpty: false, focused: true });
+            }
+        }
+    };
+
+    private onCancel = () => {
+        this.props.onFinished(false);
+    };
+
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ name: ev.target.value });
+    };
+
+    private onTopicChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ topic: ev.target.value });
+    };
+
+    private onJoinRuleChange = (joinRule: JoinRule) => {
+        this.setState({ joinRule });
+    };
+
+    private onEncryptedChange = (isEncrypted: boolean) => {
+        this.setState({ isEncrypted });
+    };
+
+    private onAliasChange = (alias: string) => {
+        this.setState({ alias });
+    };
+
+    private onDetailsToggled = (ev: SyntheticEvent<HTMLDetailsElement>) => {
+        this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
+    };
+
+    private onNoFederateChange = (noFederate: boolean) => {
+        this.setState({ noFederate });
+    };
+
+    private onNameValidate = async (fieldState: IFieldState) => {
+        const result = await CreateRoomDialog.validateRoomName(fieldState);
+        this.setState({ nameIsValid: result.valid });
+        return result;
+    };
+
+    private static validateRoomName = withValidation({
+        rules: [
+            {
+                key: "required",
+                test: async ({ value }) => !!value,
+                invalid: () => _t("Please enter a name for the room"),
+            },
+        ],
+    });
+
+    render() {
+        let aliasField;
+        if (this.state.joinRule === JoinRule.Public) {
+            const domain = MatrixClientPeg.get().getDomain();
+            aliasField = (
+                <div className="mx_CreateRoomDialog_aliasContainer">
+                    <RoomAliasField
+                        ref={this.aliasField}
+                        onChange={this.onAliasChange}
+                        domain={domain}
+                        value={this.state.alias}
+                    />
+                </div>
+            );
+        }
+
+        let publicPrivateLabel: JSX.Element;
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Private rooms can be found and joined by invitation only. Public rooms can be " +
+                    "found and joined by anyone in this community.",
+                ) }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Restricted) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Everyone in <SpaceName/> will be able to find and join this room.", {}, {
+                        SpaceName: () => <b>{ this.props.parentSpace.name }</b>,
+                    },
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Public && this.props.parentSpace) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Anyone will be able to find and join this room, not just members of <SpaceName/>.", {}, {
+                        SpaceName: () => <b>{ this.props.parentSpace.name }</b>,
+                    },
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Public) {
+            publicPrivateLabel = <p>
+                { _t("Anyone will be able to find and join this room.") }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Invite) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Only people invited will be able to find and join this room.",
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        }
+
+        let e2eeSection;
+        if (this.state.joinRule !== JoinRule.Public) {
+            let microcopy;
+            if (privateShouldBeEncrypted()) {
+                if (this.state.canChangeEncryption) {
+                    microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
+                } else {
+                    microcopy = _t("Your server requires encryption to be enabled in private rooms.");
+                }
+            } else {
+                microcopy = _t("Your server admin has disabled end-to-end encryption by default " +
+                    "in private rooms & Direct Messages.");
+            }
+            e2eeSection = <React.Fragment>
+                <LabelledToggleSwitch
+                    label={_t("Enable end-to-end encryption")}
+                    onChange={this.onEncryptedChange}
+                    value={this.state.isEncrypted}
+                    className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
+                    disabled={!this.state.canChangeEncryption}
+                />
+                <p>{ microcopy }</p>
+            </React.Fragment>;
+        }
+
+        let federateLabel = _t(
+            "You might enable this if the room will only be used for collaborating with internal " +
+            "teams on your homeserver. This cannot be changed later.",
+        );
+        if (SdkConfig.get().default_federate === false) {
+            // We only change the label if the default setting is different to avoid jarring text changes to the
+            // user. They will have read the implications of turning this off/on, so no need to rephrase for them.
+            federateLabel = _t(
+                "You might disable this if the room will be used for collaborating with external " +
+                "teams who have their own homeserver. This cannot be changed later.",
+            );
+        }
+
+        let title = _t("Create a room");
+        if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+            const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
+            title = _t("Create a room in %(communityName)s", { communityName: name });
+        } else if (!this.props.parentSpace) {
+            title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room');
+        }
+
+        return (
+            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished} title={title}>
+                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
+                    <div className="mx_Dialog_content">
+                        <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"
+                        />
+
+                        <JoinRuleDropdown
+                            label={_t("Room visibility")}
+                            labelInvite={_t("Private room (invite only)")}
+                            labelPublic={_t("Public room")}
+                            labelRestricted={this.supportsRestricted ? _t("Visible to space members") : undefined}
+                            value={this.state.joinRule}
+                            onChange={this.onJoinRuleChange}
+                        />
+
+                        { publicPrivateLabel }
+                        { e2eeSection }
+                        { aliasField }
+                        <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.",
+                                    { serverName: MatrixClientPeg.getHomeserverName() },
+                                )}
+                                onChange={this.onNoFederateChange}
+                                value={this.state.noFederate}
+                            />
+                            <p>{ federateLabel }</p>
+                        </details>
+                    </div>
+                </form>
+                <DialogButtons primaryButton={_t('Create Room')}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -0,0 +1,340 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useRef, useState } from "react";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import { GroupMember } from "../right_panel/UserInfo";
+import { parseMembersResponse, parseRoomsResponse } from "../../../stores/GroupStore";
+import { calculateRoomVia, makeRoomPermalink } from "../../../utils/permalinks/Permalinks";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import Spinner from "../elements/Spinner";
+import { mediaFromMxc } from "../../../customisations/Media";
+import SpaceStore from "../../../stores/SpaceStore";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "./UserSettingsDialog";
+import TagOrderActions from "../../../actions/TagOrderActions";
+
+interface IProps {
+    matrixClient: MatrixClient;
+    groupId: string;
+    onFinished(spaceId?: string): void;
+}
+
+export const CreateEventField = "io.element.migrated_from_community";
+
+interface IGroupRoom {
+    displayname: string;
+    name?: string;
+    roomId: string;
+    canonicalAlias?: string;
+    avatarUrl?: string;
+    topic?: string;
+    numJoinedMembers?: number;
+    worldReadable?: boolean;
+    guestCanJoin?: boolean;
+    isPublic?: boolean;
+}
+
+/* eslint-disable camelcase */
+export interface IGroupSummary {
+    profile: {
+        avatar_url?: string;
+        is_openly_joinable?: boolean;
+        is_public?: boolean;
+        long_description: string;
+        name: string;
+        short_description: string;
+    };
+    rooms_section: {
+        rooms: unknown[];
+        categories: Record<string, unknown>;
+        total_room_count_estimate: number;
+    };
+    user: {
+        is_privileged: boolean;
+        is_public: boolean;
+        is_publicised: boolean;
+        membership: string;
+    };
+    users_section: {
+        users: unknown[];
+        roles: Record<string, unknown>;
+        total_user_count_estimate: number;
+    };
+}
+/* eslint-enable camelcase */
+
+const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, groupId, onFinished }) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string>(null);
+    const [busy, setBusy] = useState(false);
+
+    const [avatar, setAvatar] = useState<File>(null); // undefined means to remove avatar
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [alias, setAlias] = useState("#" + groupId.substring(1, groupId.indexOf(":")) + ":" + cli.getDomain());
+    const spaceAliasField = useRef<RoomAliasField>();
+    const [topic, setTopic] = useState("");
+    const [joinRule, setJoinRule] = useState<JoinRule>(JoinRule.Public);
+
+    const groupSummary = useAsyncMemo<IGroupSummary>(() => cli.getGroupSummary(groupId), [groupId]);
+    useEffect(() => {
+        if (groupSummary) {
+            setName(groupSummary.profile.name || "");
+            setTopic(groupSummary.profile.short_description || "");
+            setJoinRule(groupSummary.profile.is_openly_joinable ? JoinRule.Public : JoinRule.Invite);
+            setLoading(false);
+        }
+    }, [groupSummary]);
+
+    if (loading) {
+        return <Spinner />;
+    }
+
+    const onCreateSpaceClick = async (e) => {
+        e.preventDefault();
+        if (busy) return;
+
+        setError(null);
+        setBusy(true);
+
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            setBusy(false);
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            return;
+        }
+        // validate the space name alias field but do not require it
+        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            setBusy(false);
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            return;
+        }
+
+        try {
+            const [rooms, members, invitedMembers] = await Promise.all([
+                cli.getGroupRooms(groupId).then(parseRoomsResponse) as Promise<IGroupRoom[]>,
+                cli.getGroupUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
+                cli.getGroupInvitedUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
+            ]);
+
+            const viaMap = new Map<string, string[]>();
+            for (const { roomId, canonicalAlias } of rooms) {
+                const room = cli.getRoom(roomId);
+                if (room) {
+                    viaMap.set(roomId, calculateRoomVia(room));
+                } else if (canonicalAlias) {
+                    try {
+                        const { servers } = await cli.getRoomIdForAlias(canonicalAlias);
+                        viaMap.set(roomId, servers);
+                    } catch (e) {
+                        console.warn("Failed to resolve alias during community migration", e);
+                    }
+                }
+
+                if (!viaMap.get(roomId)?.length) {
+                    // XXX: lets guess the via, this might end up being incorrect.
+                    const str = canonicalAlias || roomId;
+                    viaMap.set(roomId, [str.substring(1, str.indexOf(":"))]);
+                }
+            }
+
+            const spaceAvatar = avatar !== undefined ? avatar : groupSummary.profile.avatar_url;
+            const roomId = await createSpace(name, joinRule === JoinRule.Public, alias, topic, spaceAvatar, {
+                creation_content: {
+                    [CreateEventField]: groupId,
+                },
+                initial_state: rooms.map(({ roomId }) => ({
+                    type: EventType.SpaceChild,
+                    state_key: roomId,
+                    content: {
+                        via: viaMap.get(roomId) || [],
+                    },
+                })),
+                invite: [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()),
+            }, {
+                andView: false,
+            });
+
+            // eagerly remove it from the community panel
+            dis.dispatch(TagOrderActions.removeTag(cli, groupId));
+
+            // don't bother awaiting this, as we don't hugely care if it fails
+            cli.setGroupProfile(groupId, {
+                ...groupSummary.profile,
+                long_description: `<a href="${makeRoomPermalink(roomId)}"><h1>` +
+                    _t("This community has been upgraded into a Space") + `</h1></a><br />`
+                    + groupSummary.profile.long_description,
+            } as IGroupSummary["profile"]).catch(e => {
+                console.warn("Failed to update community profile during migration", e);
+            });
+
+            onFinished(roomId);
+
+            const onSpaceClick = () => {
+                dis.dispatch({
+                    action: "view_room",
+                    room_id: roomId,
+                });
+            };
+
+            const onPreferencesClick = () => {
+                dis.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.Preferences,
+                });
+            };
+
+            let spacesDisabledCopy;
+            if (!SpaceStore.spacesEnabled) {
+                spacesDisabledCopy = _t("To view Spaces, hide communities in <a>Preferences</a>", {}, {
+                    a: sub => <AccessibleButton onClick={onPreferencesClick} kind="link">{ sub }</AccessibleButton>,
+                });
+            }
+
+            Modal.createDialog(InfoDialog, {
+                title: _t("Space created"),
+                description: <>
+                    <div className="mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark" />
+                    <p>
+                        { _t("<SpaceName/> has been made and everyone who was a part of the community has " +
+                            "been invited to it.", {}, {
+                            SpaceName: () => <AccessibleButton onClick={onSpaceClick} kind="link">
+                                { name }
+                            </AccessibleButton>,
+                        }) }
+                        &nbsp;
+                        { spacesDisabledCopy }
+                    </p>
+                    <p>
+                        { _t("To create a Space from another community, just pick the community in Preferences.") }
+                    </p>
+                </>,
+                button: _t("Preferences"),
+                onFinished: (openPreferences: boolean) => {
+                    if (openPreferences) {
+                        onPreferencesClick();
+                    }
+                },
+            }, "mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog");
+        } catch (e) {
+            console.error(e);
+            setError(e);
+        }
+
+        setBusy(false);
+    };
+
+    let footer;
+    if (error) {
+        footer = <>
+            <img src={require("../../../../res/img/element-icons/warning-badge.svg")} height="24" width="24" alt="" />
+
+            <span className="mx_CreateSpaceFromCommunityDialog_error">
+                <div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>
+                <div className="mx_CreateSpaceFromCommunityDialog_errorCaption">{ _t("Try again") }</div>
+            </span>
+
+            <AccessibleButton className="mx_CreateSpaceFromCommunityDialog_retryButton" onClick={onCreateSpaceClick}>
+                { _t("Retry") }
+            </AccessibleButton>
+        </>;
+    } else {
+        footer = <>
+            <AccessibleButton kind="primary_outline" disabled={busy} onClick={() => onFinished()}>
+                { _t("Cancel") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" disabled={busy} onClick={onCreateSpaceClick}>
+                { busy ? _t("Creating...") : _t("Create Space") }
+            </AccessibleButton>
+        </>;
+    }
+
+    return <BaseDialog
+        title={_t("Create Space from community")}
+        className="mx_CreateSpaceFromCommunityDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <div className="mx_CreateSpaceFromCommunityDialog_content">
+            <p>
+                { _t("A link to the Space will be put in your community description.") }
+                &nbsp;
+                { _t("All rooms will be added and all community members will be invited.") }
+            </p>
+            <p className="mx_CreateSpaceFromCommunityDialog_flairNotice">
+                { _t("Flair won't be available in Spaces for the foreseeable future.") }
+            </p>
+
+            <SpaceCreateForm
+                busy={busy}
+                onSubmit={onCreateSpaceClick}
+                avatarUrl={groupSummary.profile.avatar_url
+                    ? mediaFromMxc(groupSummary.profile.avatar_url).getThumbnailOfSourceHttp(80, 80, "crop")
+                    : undefined
+                }
+                setAvatar={setAvatar}
+                name={name}
+                setName={setName}
+                nameFieldRef={spaceNameField}
+                topic={topic}
+                setTopic={setTopic}
+                alias={alias}
+                setAlias={setAlias}
+                showAliasField={joinRule === JoinRule.Public}
+                aliasFieldRef={spaceAliasField}
+            >
+                <p>{ _t("This description will be shown to people when they view your space") }</p>
+                <JoinRuleDropdown
+                    label={_t("Space visibility")}
+                    labelInvite={_t("Private space (invite only)")}
+                    labelPublic={_t("Public space")}
+                    value={joinRule}
+                    onChange={setJoinRule}
+                />
+                <p>{ joinRule === JoinRule.Public
+                    ? _t("Open space for anyone, best for communities")
+                    : _t("Invite only, best for yourself or teams")
+                }</p>
+                { joinRule !== JoinRule.Public &&
+                    <div className="mx_CreateSpaceFromCommunityDialog_nonPublicSpacer" />
+                }
+            </SpaceCreateForm>
+        </div>
+
+        <div className="mx_CreateSpaceFromCommunityDialog_footer">
+            { footer }
+        </div>
+    </BaseDialog>;
+};
+
+export default CreateSpaceFromCommunityDialog;
+

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -0,0 +1,187 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useRef, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { BetaPill } from "../beta/BetaCard";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import SpaceStore from "../../../stores/SpaceStore";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
+import { SubspaceSelector } from "./AddExistingToSpaceDialog";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+
+interface IProps {
+    space: Room;
+    onAddExistingSpaceClick(): void;
+    onFinished(added?: boolean): void;
+}
+
+const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick, onFinished }) => {
+    const [parentSpace, setParentSpace] = useState(space);
+
+    const [busy, setBusy] = useState<boolean>(false);
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [alias, setAlias] = useState("");
+    const spaceAliasField = useRef<RoomAliasField>();
+    const [avatar, setAvatar] = useState<File>(null);
+    const [topic, setTopic] = useState<string>("");
+
+    const supportsRestricted = !!SpaceStore.instance.restrictedJoinRuleSupport?.preferred;
+
+    const spaceJoinRule = space.getJoinRule();
+    let defaultJoinRule = JoinRule.Invite;
+    if (spaceJoinRule === JoinRule.Public) {
+        defaultJoinRule = JoinRule.Public;
+    } else if (supportsRestricted) {
+        defaultJoinRule = JoinRule.Restricted;
+    }
+    const [joinRule, setJoinRule] = useState<JoinRule>(defaultJoinRule);
+
+    const onCreateSubspaceClick = async (e) => {
+        e.preventDefault();
+        if (busy) return;
+
+        setBusy(true);
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            setBusy(false);
+            return;
+        }
+        // validate the space name alias field but do not require it
+        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            setBusy(false);
+            return;
+        }
+
+        try {
+            await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace, joinRule });
+
+            onFinished(true);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    let joinRuleMicrocopy: JSX.Element;
+    if (joinRule === JoinRule.Restricted) {
+        joinRuleMicrocopy = <p>
+            { _t(
+                "Anyone in <SpaceName/> will be able to find and join.", {}, {
+                    SpaceName: () => <b>{ parentSpace.name }</b>,
+                },
+            ) }
+        </p>;
+    } else if (joinRule === JoinRule.Public) {
+        joinRuleMicrocopy = <p>
+            { _t(
+                "Anyone will be able to find and join this space, not just members of <SpaceName/>.", {}, {
+                    SpaceName: () => <b>{ parentSpace.name }</b>,
+                },
+            ) }
+        </p>;
+    } else if (joinRule === JoinRule.Invite) {
+        joinRuleMicrocopy = <p>
+            { _t("Only people invited will be able to find and join this space.") }
+        </p>;
+    }
+
+    return <BaseDialog
+        title={(
+            <SubspaceSelector
+                title={_t("Create a space")}
+                space={space}
+                value={parentSpace}
+                onChange={setParentSpace}
+            />
+        )}
+        className="mx_CreateSubspaceDialog"
+        contentId="mx_CreateSubspaceDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={space.client}>
+            <div className="mx_CreateSubspaceDialog_content">
+                <div className="mx_CreateSubspaceDialog_betaNotice">
+                    <BetaPill />
+                    { _t("Add a space to a space you manage.") }
+                </div>
+
+                <SpaceCreateForm
+                    busy={busy}
+                    onSubmit={onCreateSubspaceClick}
+                    setAvatar={setAvatar}
+                    name={name}
+                    setName={setName}
+                    nameFieldRef={spaceNameField}
+                    topic={topic}
+                    setTopic={setTopic}
+                    alias={alias}
+                    setAlias={setAlias}
+                    showAliasField={joinRule === JoinRule.Public}
+                    aliasFieldRef={spaceAliasField}
+                >
+                    <JoinRuleDropdown
+                        label={_t("Space visibility")}
+                        labelInvite={_t("Private space (invite only)")}
+                        labelPublic={_t("Public space")}
+                        labelRestricted={supportsRestricted ? _t("Visible to space members") : undefined}
+                        width={478}
+                        value={joinRule}
+                        onChange={setJoinRule}
+                    />
+                    { joinRuleMicrocopy }
+                </SpaceCreateForm>
+            </div>
+
+            <div className="mx_CreateSubspaceDialog_footer">
+                <div className="mx_CreateSubspaceDialog_footer_prompt">
+                    <div>{ _t("Want to add an existing space instead?") }</div>
+                    <AccessibleButton
+                        kind="link"
+                        onClick={() => {
+                            onAddExistingSpaceClick();
+                            onFinished();
+                        }}
+                    >
+                        { _t("Add existing space") }
+                    </AccessibleButton>
+                </div>
+
+                <AccessibleButton kind="primary_outline" disabled={busy} onClick={() => onFinished(false)}>
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <AccessibleButton kind="primary" disabled={busy} onClick={onCreateSubspaceClick}>
+                    { busy ? _t("Adding...") : _t("Add") }
+                </AccessibleButton>
+            </div>
+        </MatrixClientContext.Provider>
+    </BaseDialog>;
+};
+
+export default CreateSubspaceDialog;
+

src/components/views/dialogs/CryptoStoreTooNewDialog.tsx

@@ -16,17 +16,22 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import QuestionDialog from "./QuestionDialog";
 
-export default (props) => {
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
     const brand = SdkConfig.get().brand;
 
     const _onLogoutClicked = () => {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Logout e2e db too new', '', QuestionDialog, {
             title: _t("Sign out"),
             description: _t(
@@ -39,8 +44,8 @@ export default (props) => {
             focus: false,
             onFinished: (doLogout) => {
                 if (doLogout) {
-                    dis.dispatch({action: 'logout'});
-                    props.onFinished();
+                    dis.dispatch({ action: 'logout' });
+                    props.onFinished(true);
                 }
             },
         });
@@ -54,8 +59,6 @@ export default (props) => {
             { brand },
         );
 
-    const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-    const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
     return (<BaseDialog className="mx_CryptoStoreTooNewDialog"
         contentId='mx_Dialog_content'
         title={_t("Incompatible Database")}
@@ -69,9 +72,11 @@ export default (props) => {
             hasCancel={false}
             onPrimaryButtonClick={props.onFinished}
         >
-            <button onClick={_onLogoutClicked} >
+            <button onClick={_onLogoutClicked}>
                 { _t('Sign out') }
             </button>
         </DialogButtons>
     </BaseDialog>);
 };
+
+export default CryptoStoreTooNewDialog;

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -16,20 +16,37 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { AuthType, IAuthData } from 'matrix-js-sdk/src/interactive-auth';
 
-import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
-import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
-import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import InteractiveAuth, { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import { DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import StyledCheckbox from "../elements/StyledCheckbox";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+
+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 +63,10 @@ export default class DeactivateAccountDialog extends React.Component {
             continueKind: null,
         };
 
-        this._initAuth(/* shouldErase= */false);
+        this.initAuth(/* shouldErase= */false);
     }
 
-    _onStagePhaseChange = (stage, phase) => {
+    private onStagePhaseChange = (stage: AuthType, phase: string): void => {
         const dialogAesthetics = {
             [SSOAuthEntry.PHASE_PREAUTH]: {
                 body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
@@ -84,22 +101,25 @@ export default class DeactivateAccountDialog extends React.Component {
             if (phaseAesthetics && phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
             if (phaseAesthetics && phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
         }
-        this.setState({bodyText, continueText, continueKind});
+        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});
-        this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+        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: IAuthData): void => {
+        // XXX: this should be returning a promise to maintain the state inside the state machine correct
+        // but given that a deactivation is followed by a local logout and all object instances being thrown away
+        // this isn't done.
         MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => {
             // Deactivation worked - logout & close this dialog
             Analytics.trackEvent('Account', 'Deactivate Account');
@@ -107,13 +127,13 @@ export default class DeactivateAccountDialog extends React.Component {
             this.props.onFinished(true);
         }).catch(e => {
             console.error(e);
-            this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+            this.setState({ errStr: _t("There was a problem communicating with the server. Please try again.") });
         });
     };
 
-    _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,34 +143,32 @@ 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.
             // We'll try to log something in an vain attempt to record what happened (storage
             // is also obliterated on logout).
             console.warn("User's account got deactivated without confirmation: Server had no auth");
-            this.setState({errStr: _t("Server did not require any authentication")});
+            this.setState({ errStr: _t("Server did not require any authentication") });
         }).catch(e => {
             if (e && e.httpStatus === 401 && e.data) {
                 // Valid UIA response
-                this.setState({authData: e.data, authEnabled: true});
+                this.setState({ authData: e.data, authEnabled: true });
             } else {
-                this.setState({errStr: _t("Server did not return valid authentication information.")});
+                this.setState({ errStr: _t("Server did not return valid authentication information.") });
             }
         });
     }
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
+    public render() {
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
@@ -158,17 +176,19 @@ export default class DeactivateAccountDialog extends React.Component {
             </div>;
         }
 
-        let auth = <div>{_t("Loading...")}</div>;
+        let auth = <div>{ _t("Loading...") }</div>;
         if (this.state.authData && this.state.authEnabled) {
             auth = (
                 <div>
-                    {this.state.bodyText}
+                    { this.state.bodyText }
                     <InteractiveAuth
                         matrixClient={MatrixClientPeg.get()}
                         authData={this.state.authData}
-                        makeRequest={this._onUIAuthComplete}
-                        onAuthFinished={this._onUIAuthFinished}
-                        onStagePhaseChange={this._onStagePhaseChange}
+                        // XXX: onUIAuthComplete breaches the expected method contract, it gets away with it because it
+                        // knows the entire app is about to die as a result of the account deactivation.
+                        makeRequest={this.onUIAuthComplete as any}
+                        onAuthFinished={this.onUIAuthFinished}
+                        onStagePhaseChange={this.onStagePhaseChange}
                         continueText={this.state.continueText}
                         continueKind={this.state.continueKind}
                     />
@@ -214,20 +234,20 @@ export default class DeactivateAccountDialog extends React.Component {
                         <p>
                             <StyledCheckbox
                                 checked={this.state.shouldErase}
-                                onChange={this._onEraseFieldChange}
+                                onChange={this.onEraseFieldChange}
                             >
-                                {_t(
+                                { _t(
                                     "Please forget all messages I have sent when my account is deactivated " +
                                     "(<b>Warning:</b> this will cause future users to see an incomplete view " +
                                     "of conversations)",
                                     {},
                                     { b: (sub) => <b>{ sub }</b> },
-                                )}
+                                ) }
                             </StyledCheckbox>
                         </p>
 
-                        {error}
-                        {auth}
+                        { error }
+                        { auth }
                     </div>
 
                 </div>
@@ -235,7 +255,3 @@ export default class DeactivateAccountDialog extends React.Component {
         );
     }
 }
-
-DeactivateAccountDialog.propTypes = {
-    onFinished: PropTypes.func.isRequired,
-};

src/components/views/dialogs/EditCommunityPrototypeDialog.tsx

@@ -23,8 +23,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import FlairStore from "../../../stores/FlairStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     communityId: string;
@@ -60,7 +60,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
     }
 
     private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        this.setState({name: ev.target.value});
+        this.setState({ name: ev.target.value });
     };
 
     private onSubmit = async (ev) => {
@@ -71,7 +71,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
 
         // We'll create the community now to see if it's taken, leaving it active in
         // the background for the user to look at while they invite people.
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             let avatarUrl = this.state.currentAvatarUrl || ""; // must be a string for synapse to accept it
             if (this.state.avatarFile) {
@@ -99,13 +99,13 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
 
     private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
         if (!e.target.files || !e.target.files.length) {
-            this.setState({avatarFile: null});
+            this.setState({ avatarFile: null });
         } else {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             const file = e.target.files[0];
             const reader = new FileReader();
             reader.onload = (ev: ProgressEvent<FileReader>) => {
-                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+                this.setState({ avatarFile: file, busy: false, avatarPreview: ev.target.result as string });
             };
             reader.readAsDataURL(file);
         }
@@ -122,7 +122,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                 const url = mediaFromMxc(this.state.currentAvatarUrl).srcHttp;
                 preview = <img src={url} className="mx_EditCommunityPrototypeDialog_avatar" />;
             } else {
-                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />
+                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />;
             }
         }
 
@@ -144,23 +144,25 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                         </div>
                         <div className="mx_EditCommunityPrototypeDialog_rowAvatar">
                             <input
-                                type="file" style={{display: "none"}}
-                                ref={this.avatarUploadRef} accept="image/*"
+                                type="file"
+                                style={{ display: "none" }}
+                                ref={this.avatarUploadRef}
+                                accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
                             <AccessibleButton
                                 onClick={this.onChangeAvatar}
                                 className="mx_EditCommunityPrototypeDialog_avatarContainer"
-                            >{preview}</AccessibleButton>
+                            >{ preview }</AccessibleButton>
                             <div className="mx_EditCommunityPrototypeDialog_tip">
-                                <b>{_t("Add image (optional)")}</b>
+                                <b>{ _t("Add image (optional)") }</b>
                                 <span>
-                                    {_t("An image will help people identify your community.")}
+                                    { _t("An image will help people identify your community.") }
                                 </span>
                             </div>
                         </div>
                         <AccessibleButton kind="primary" onClick={this.onSubmit} disabled={this.state.busy}>
-                            {_t("Save")}
+                            { _t("Save") }
                         </AccessibleButton>
                     </div>
                 </form>

src/components/views/dialogs/ErrorDialog.tsx

@@ -26,38 +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";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+    title?: string;
+    description?: React.ReactNode;
+    button?: string;
+    focus?: boolean;
+    headerImage?: string;
+}
+
+interface IState {
+    onFinished: (success: boolean) => void;
+}
 
 @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,
-    };
-
-    static defaultProps = {
+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() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+    public render() {
         return (
             <BaseDialog
                 className="mx_ErrorDialog"

src/components/views/dialogs/FeedbackDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
@@ -28,8 +28,7 @@ import StyledRadioGroup from "../elements/StyledRadioGroup";
 
 const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
     "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
-const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
-
+const newIssueUrl = "https://github.com/vector-im/element-web/issues/new/choose";
 
 export default (props) => {
     const [rating, setRating] = useState("");
@@ -59,10 +58,10 @@ export default (props) => {
         countlyFeedbackSection = <React.Fragment>
             <hr />
             <div className="mx_FeedbackDialog_section mx_FeedbackDialog_rateApp">
-                <h3>{_t("Rate %(brand)s", { brand })}</h3>
+                <h3>{ _t("Rate %(brand)s", { brand }) }</h3>
 
-                <p>{_t("Tell us below how you feel about %(brand)s so far.", { brand })}</p>
-                <p>{_t("Please go into as much detail as you like, so we can track down the problem.")}</p>
+                <p>{ _t("Tell us below how you feel about %(brand)s so far.", { brand }) }</p>
+                <p>{ _t("Please go into as much detail as you like, so we can track down the problem.") }</p>
 
                 <StyledRadioGroup
                     name="feedbackRating"
@@ -96,7 +95,7 @@ export default (props) => {
     let subheading;
     if (hasFeedback) {
         subheading = (
-            <h2>{_t("There are two ways you can provide feedback and help us improve %(brand)s.", { brand })}</h2>
+            <h2>{ _t("There are two ways you can provide feedback and help us improve %(brand)s.", { brand }) }</h2>
         );
     }
 
@@ -107,7 +106,7 @@ export default (props) => {
                 _t("PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> " +
                     "to help us track down the problem.", {}, {
                     debugLogsLink: sub => (
-                        <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{sub}</AccessibleButton>
+                        <AccessibleButton kind="link" onClick={onDebugLogsLinkClick}>{ sub }</AccessibleButton>
                     ),
                 })
             }</p>
@@ -122,7 +121,7 @@ export default (props) => {
             { subheading }
 
             <div className="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug">
-                <h3>{_t("Report a bug")}</h3>
+                <h3>{ _t("Report a bug") }</h3>
                 <p>{
                     _t("Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. " +
                         "No match? <newIssueLink>Start a new one</newIssueLink>.", {}, {
@@ -134,7 +133,7 @@ export default (props) => {
                         },
                     })
                 }</p>
-                {bugReports}
+                { bugReports }
             </div>
             { countlyFeedbackSection }
         </React.Fragment>}

src/components/views/dialogs/ForwardDialog.tsx

@@ -0,0 +1,275 @@
+/*
+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";
+import SpaceStore from "../../../stores/SpaceStore";
+
+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} />;
+    } else if (sendState === SendState.Sent) {
+        className = "mx_ForwardList_sent";
+        disabled = true;
+        title = _t("Sent");
+        icon = <div className="mx_ForwardList_sendIcon" aria-label={title} />;
+    } 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 = SpaceStore.spacesEnabled;
+    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/GenericFeatureFeedbackDialog.tsx

@@ -0,0 +1,101 @@
+/*
+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 { submitFeedback } from "../../../rageshake/submit-rageshake";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+
+interface IProps extends IDialogProps {
+    title: string;
+    subheading: string;
+    rageshakeLabel: string;
+    rageshakeData?: Record<string, string>;
+}
+
+const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
+    title,
+    subheading,
+    children,
+    rageshakeLabel,
+    rageshakeData = {},
+    onFinished,
+}) => {
+    const [comment, setComment] = useState("");
+    const [canContact, setCanContact] = useState(false);
+
+    const sendFeedback = async (ok: boolean) => {
+        if (!ok) return onFinished(false);
+
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, rageshakeLabel, comment, canContact, rageshakeData);
+        onFinished(true);
+
+        Modal.createTrackedDialog("Feedback Sent", rageshakeLabel, InfoDialog, {
+            title,
+            description: _t("Thank you for your feedback, we really appreciate it."),
+            button: _t("Done"),
+            hasCloseButton: false,
+            fixedWidth: false,
+        });
+    };
+
+    return (<QuestionDialog
+        className="mx_GenericFeatureFeedbackDialog"
+        hasCancelButton={true}
+        title={title}
+        description={<React.Fragment>
+            <div className="mx_GenericFeatureFeedbackDialog_subheading">
+                { subheading }
+                &nbsp;
+                { _t("Your platform and username will be noted to help us use your feedback as much as we can.") }
+
+                { children }
+            </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}
+                onChange={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 GenericFeatureFeedbackDialog;

src/components/views/dialogs/HostSignupDialog.tsx

@@ -31,7 +31,7 @@ import {
     IPostmessageResponseData,
     PostmessageAction,
 } from "./HostSignupDialogTypes";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const HOST_SIGNUP_KEY = "host_signup";
 
@@ -86,7 +86,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             case PostmessageAction.CloseDialog:
                 return this.closeDialog();
         }
-    }
+    };
 
     private maximizeDialog = () => {
         this.setState({
@@ -96,7 +96,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Maximize,
         });
-    }
+    };
 
     private minimizeDialog = () => {
         this.setState({
@@ -106,7 +106,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Minimize,
         });
-    }
+    };
 
     private closeDialog = async () => {
         window.removeEventListener("message", this.messageHandler);
@@ -114,7 +114,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         PersistedElement.destroyElement("host_signup");
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
-    }
+    };
 
     private onCloseClick = async () => {
         if (this.state.completed) {
@@ -137,16 +137,16 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 },
             );
         }
-    }
+    };
 
     private sendMessage = (message: IPostmessageResponseData) => {
         this.iframeRef.current.contentWindow.postMessage(message, this.config.url);
-    }
+    };
 
     private async sendAccountDetails() {
         const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
         if (!openIdToken || !openIdToken.access_token) {
-            console.warn("Failed to connect to homeserver for OpenID token.")
+            console.warn("Failed to connect to homeserver for OpenID token.");
             this.setState({
                 completed: true,
                 error: _t("Failed to connect to your homeserver. Please close this dialog and try again."),
@@ -171,38 +171,38 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             return this.sendAccountDetails();
         }
         return this.closeDialog();
-    }
+    };
 
     private onAccountDetailsRequest = () => {
         const textComponent = (
             <>
                 <p>
-                    {_t("Continuing temporarily allows the %(hostSignupBrand)s setup process to access your " +
+                    { _t("Continuing temporarily allows the %(hostSignupBrand)s setup process to access your " +
                         "account to fetch verified email addresses. This data is not stored.", {
                         hostSignupBrand: this.config.brand,
-                    })}
+                    }) }
                 </p>
                 <p>
-                    {_t("Learn more in our <privacyPolicyLink />, <termsOfServiceLink /> and <cookiePolicyLink />.",
+                    { _t("Learn more in our <privacyPolicyLink />, <termsOfServiceLink /> and <cookiePolicyLink />.",
                         {},
                         {
                             cookiePolicyLink: () => (
                                 <a href={this.config.cookiePolicyUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Cookie Policy")}
+                                    { _t("Cookie Policy") }
                                 </a>
                             ),
                             privacyPolicyLink: () => (
                                 <a href={this.config.privacyPolicyUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Privacy Policy")}
+                                    { _t("Privacy Policy") }
                                 </a>
                             ),
                             termsOfServiceLink: () => (
                                 <a href={this.config.termsOfServiceUrl} target="_blank" rel="noreferrer noopener">
-                                    {_t("Terms of Service")}
+                                    { _t("Terms of Service") }
                                 </a>
                             ),
                         },
-                    )}
+                    ) }
                 </p>
             </>
         );
@@ -215,7 +215,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 onFinished: this.onAccountDetailsDialogFinished,
             },
         );
-    }
+    };
 
     public componentDidMount() {
         window.addEventListener("message", this.messageHandler);
@@ -241,12 +241,12 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                 },
                             )}
                         >
-                            {this.state.minimized &&
+                            { this.state.minimized &&
                                 <div className="mx_Dialog_header mx_Dialog_headerWithButton">
                                     <div className="mx_Dialog_title">
-                                        {_t("%(hostSignupBrand)s Setup", {
+                                        { _t("%(hostSignupBrand)s Setup", {
                                             hostSignupBrand: this.config.brand,
-                                        })}
+                                        }) }
                                     </div>
                                     <AccessibleButton
                                         className="mx_HostSignup_maximize_button"
@@ -256,7 +256,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                     />
                                 </div>
                             }
-                            {!this.state.minimized &&
+                            { !this.state.minimized &&
                                 <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
                                     <AccessibleButton
                                         onClick={this.minimizeDialog}
@@ -272,12 +272,12 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                     />
                                 </div>
                             }
-                            {this.state.error &&
+                            { this.state.error &&
                                 <div>
-                                    {this.state.error}
+                                    { this.state.error }
                                 </div>
                             }
-                            {!this.state.error &&
+                            { !this.state.error &&
                                 <iframe
                                     src={this.config.url}
                                     ref={this.iframeRef}

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/IncomingSasDialog.js

@@ -16,11 +16,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -86,9 +86,9 @@ export default class IncomingSasDialog extends React.Component {
     }
 
     _onContinueClick = () => {
-        this.setState({phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM});
+        this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM });
         this.props.verifier.verify().then(() => {
-            this.setState({phase: PHASE_VERIFIED});
+            this.setState({ phase: PHASE_VERIFIED });
         }).catch((e) => {
             console.log("Verification failed", e);
         });
@@ -130,58 +130,63 @@ export default class IncomingSasDialog extends React.Component {
         const oppProfile = this.state.opponentProfile;
         if (oppProfile) {
             const url = oppProfile.avatar_url
-                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(Math.floor(48 * window.devicePixelRatio))
+                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48)
                 : null;
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
-                <BaseAvatar name={oppProfile.displayname}
+                <BaseAvatar
+                    name={oppProfile.displayname}
                     idName={this.props.verifier.userId}
                     url={url}
-                    width={48} height={48} resizeMethod='crop'
+                    width={48}
+                    height={48}
+                    resizeMethod='crop'
                 />
-                <h2>{oppProfile.displayname}</h2>
+                <h2>{ oppProfile.displayname }</h2>
             </div>;
         } else if (this.state.opponentProfileError) {
             profile = <div>
-                <BaseAvatar name={this.props.verifier.userId.slice(1)}
+                <BaseAvatar
+                    name={this.props.verifier.userId.slice(1)}
                     idName={this.props.verifier.userId}
-                    width={48} height={48}
+                    width={48}
+                    height={48}
                 />
-                <h2>{this.props.verifier.userId}</h2>
+                <h2>{ this.props.verifier.userId }</h2>
             </div>;
         } else {
             profile = <Spinner />;
         }
 
         const userDetailText = [
-            <p key="p1">{_t(
+            <p key="p1">{ _t(
                 "Verify this user to mark them as trusted. " +
                 "Trusting users gives you extra peace of mind when using " +
                 "end-to-end encrypted messages.",
-            )}</p>,
-            <p key="p2">{_t(
+            ) }</p>,
+            <p key="p2">{ _t(
                 // NB. Below wording adjusted to singular 'session' until we have
                 // cross-signing
                 "Verifying this user will mark their session as trusted, and " +
                 "also mark your session as trusted to them.",
-            )}</p>,
+            ) }</p>,
         ];
 
         const selfDetailText = [
-            <p key="p1">{_t(
+            <p key="p1">{ _t(
                 "Verify this device to mark it as trusted. " +
                 "Trusting this device gives you and other users extra peace of mind when using " +
                 "end-to-end encrypted messages.",
-            )}</p>,
-            <p key="p2">{_t(
+            ) }</p>,
+            <p key="p2">{ _t(
                 "Verifying this device will mark it as trusted, and users who have verified with " +
                 "you will trust this device.",
-            )}</p>,
+            ) }</p>,
         ];
 
         return (
             <div>
-                {profile}
-                {isSelf ? selfDetailText : userDetailText}
+                { profile }
+                { isSelf ? selfDetailText : userDetailText }
                 <DialogButtons
                     primaryButton={_t('Continue')}
                     hasCancel={true}
@@ -209,7 +214,7 @@ export default class IncomingSasDialog extends React.Component {
         return (
             <div>
                 <Spinner />
-                <p>{_t("Waiting for partner to confirm...")}</p>
+                <p>{ _t("Waiting for partner to confirm...") }</p>
             </div>
         );
     }
@@ -251,7 +256,7 @@ export default class IncomingSasDialog extends React.Component {
                 onFinished={this._onFinished}
                 fixedWidth={false}
             >
-                {body}
+                { body }
             </BaseDialog>
         );
     }

src/components/views/dialogs/InfoDialog.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd.
 Copyright 2019 Bastian Masanek, Noxware IT <matrix@noxware.de>
+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,31 +15,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import React, { ReactNode, KeyboardEvent } from 'react';
 import classNames from "classnames";
 
-export default class InfoDialog extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        title: PropTypes.string,
-        description: PropTypes.node,
-        button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        onFinished: PropTypes.func,
-        hasCloseButton: PropTypes.bool,
-        onKeyDown: PropTypes.func,
-        fixedWidth: PropTypes.bool,
-    };
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import { IDialogProps } from "./IDialogProps";
 
+interface IProps extends IDialogProps {
+    title?: string;
+    description?: ReactNode;
+    className?: string;
+    button?: boolean | string;
+    hasCloseButton?: boolean;
+    fixedWidth?: boolean;
+    onKeyDown?(event: KeyboardEvent): void;
+}
+
+export default class InfoDialog extends React.Component<IProps> {
     static defaultProps = {
         title: '',
         description: '',
         hasCloseButton: false,
     };
 
-    onFinished = () => {
+    private onFinished = () => {
         this.props.onFinished();
     };
 
@@ -63,8 +62,7 @@ export default class InfoDialog extends React.Component {
                 { this.props.button !== false && <DialogButtons primaryButton={this.props.button || _t('OK')}
                     onPrimaryButtonClick={this.onFinished}
                     hasCancel={false}
-                >
-                </DialogButtons> }
+                /> }
             </BaseDialog>
         );
     }

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -16,11 +16,11 @@ 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 dis from '../../../dispatcher/dispatcher';
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.IntegrationsDisabledDialog")
 export default class IntegrationsDisabledDialog extends React.Component {
@@ -42,11 +42,14 @@ export default class IntegrationsDisabledDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsDisabledDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations are disabled")}>
+            <BaseDialog
+                className='mx_IntegrationsDisabledDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations are disabled")}
+            >
                 <div className='mx_IntegrationsDisabledDialog_content'>
-                    <p>{_t("Enable 'Manage Integrations' in Settings to do this.")}</p>
+                    <p>{ _t("Enable 'Manage Integrations' in Settings to do this.") }</p>
                 </div>
                 <DialogButtons
                     primaryButton={_t("Settings")}

src/components/views/dialogs/IntegrationsImpossibleDialog.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.IntegrationsImpossibleDialog")
 export default class IntegrationsImpossibleDialog extends React.Component {
@@ -37,16 +37,19 @@ export default class IntegrationsImpossibleDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsImpossibleDialog' hasCancel={false}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations not allowed")}>
+            <BaseDialog
+                className='mx_IntegrationsImpossibleDialog'
+                hasCancel={false}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations not allowed")}
+            >
                 <div className='mx_IntegrationsImpossibleDialog_content'>
                     <p>
-                        {_t(
-                            "Your %(brand)s doesn't allow you to use an Integration Manager to do this. " +
+                        { _t(
+                            "Your %(brand)s doesn't allow you to use an integration manager to do this. " +
                             "Please contact an admin.",
                             { brand },
-                        )}
+                        ) }
                     </p>
                 </div>
                 <DialogButtons

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -23,9 +23,9 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
-import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
-import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.InteractiveAuthDialog")
 export default class InteractiveAuthDialog extends React.Component {
@@ -117,7 +117,7 @@ export default class InteractiveAuthDialog extends React.Component {
 
     _onUpdateStagePhase = (newStage, newPhase) => {
         // We copy the stage and stage phase params into state for title selection in render()
-        this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
+        this.setState({ uiaStage: newStage, uiaStagePhase: newPhase });
     };
 
     _onDismissClick = () => {
@@ -163,7 +163,7 @@ export default class InteractiveAuthDialog extends React.Component {
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    {body}
+                    { body }
                     <InteractiveAuth
                         ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState, useCallback, useRef} from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 
 export default function KeySignatureUploadFailedDialog({
-        failures,
-        source,
-        continuation,
-        onFinished,
-    }) {
+    failures,
+    source,
+    continuation,
+    onFinished,
+}) {
     const RETRIES = 2;
     const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -69,10 +69,10 @@ export default function KeySignatureUploadFailedDialog({
         const brand = SdkConfig.get().brand;
 
         body = (<div>
-            <p>{_t("%(brand)s encountered an error during upload of:", { brand })}</p>
-            <p>{reason}</p>
-            {retrying && <Spinner />}
-            <pre>{JSON.stringify(failures, null, 2)}</pre>
+            <p>{ _t("%(brand)s encountered an error during upload of:", { brand }) }</p>
+            <p>{ reason }</p>
+            { retrying && <Spinner /> }
+            <pre>{ JSON.stringify(failures, null, 2) }</pre>
             <DialogButtons
                 primaryButton='Retry'
                 hasCancel={true}
@@ -83,11 +83,11 @@ export default function KeySignatureUploadFailedDialog({
         </div>);
     } else {
         body = (<div>
-            {success ?
-              <span>{_t("Upload completed")}</span> :
-              cancelled ?
-                <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unable to upload")}</span>}
+            { success ?
+                <span>{ _t("Upload completed") }</span> :
+                cancelled ?
+                    <span>{ _t("Cancelled signature upload") }</span> :
+                    <span>{ _t("Unable to upload") }</span> }
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}
@@ -104,7 +104,7 @@ export default function KeySignatureUploadFailedDialog({
             fixedWidth={false}
             onFinished={() => {}}
         >
-            {body}
+            { body }
         </BaseDialog>
     );
 }

src/components/views/dialogs/LazyLoadingDisabledDialog.js

@@ -44,7 +44,7 @@ export default (props) => {
     return (<QuestionDialog
         hasCancelButton={false}
         title={_t("Incompatible local cache")}
-        description={<div><p>{description1}</p><p>{description2}</p></div>}
+        description={<div><p>{ description1 }</p><p>{ description2 }</p></div>}
         button={_t("Clear cache and resync")}
         onFinished={props.onFinished}
     />);

src/components/views/dialogs/LazyLoadingResyncDialog.js

@@ -33,7 +33,7 @@ export default (props) => {
     return (<QuestionDialog
         hasCancelButton={false}
         title={_t("Updating %(brand)s", { brand })}
-        description={<div>{description}</div>}
+        description={<div>{ description }</div>}
         button={_t("OK")}
         onFinished={props.onFinished}
     />);

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -0,0 +1,197 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+
+import { _t } from '../../../languageHandler';
+import DialogButtons from "../elements/DialogButtons";
+import BaseDialog from "../dialogs/BaseDialog";
+import SpaceStore from "../../../stores/SpaceStore";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { Entry } from "./AddExistingToSpaceDialog";
+import SearchBox from "../../structures/SearchBox";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+
+enum RoomsToLeave {
+    All = "All",
+    Specific = "Specific",
+    None = "None",
+}
+
+const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
+
+    const filteredRooms = useMemo(() => {
+        if (!lcQuery) {
+            return rooms;
+        }
+
+        const matcher = new QueryMatcher<Room>(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        });
+
+        return matcher.match(lcQuery);
+    }, [rooms, lcQuery]);
+
+    return <div className="mx_LeaveSpaceDialog_section">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={filterPlaceholder}
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
+            { filteredRooms.map(room => {
+                return <Entry
+                    key={room.roomId}
+                    room={room}
+                    checked={selected.has(room)}
+                    onChange={(checked) => {
+                        onChange(checked, room);
+                    }}
+                />;
+            }) }
+            { filteredRooms.length < 1 ? <span className="mx_LeaveSpaceDialog_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+    </div>;
+};
+
+const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave }) => {
+    const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
+    const [state, setState] = useState<string>(RoomsToLeave.None);
+
+    useEffect(() => {
+        if (state === RoomsToLeave.All) {
+            setRoomsToLeave(spaceChildren);
+        } else {
+            setRoomsToLeave([]);
+        }
+    }, [setRoomsToLeave, state, spaceChildren]);
+
+    return <div className="mx_LeaveSpaceDialog_section">
+        <StyledRadioGroup
+            name="roomsToLeave"
+            value={state}
+            onChange={setState}
+            definitions={[
+                {
+                    value: RoomsToLeave.None,
+                    label: _t("Don't leave any"),
+                }, {
+                    value: RoomsToLeave.All,
+                    label: _t("Leave all rooms and spaces"),
+                }, {
+                    value: RoomsToLeave.Specific,
+                    label: _t("Leave specific rooms and spaces"),
+                },
+            ]}
+        />
+
+        { state === RoomsToLeave.Specific && (
+            <SpaceChildPicker
+                filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
+                rooms={spaceChildren}
+                selected={selected}
+                onChange={(selected: boolean, room: Room) => {
+                    if (selected) {
+                        setRoomsToLeave([room, ...roomsToLeave]);
+                    } else {
+                        setRoomsToLeave(roomsToLeave.filter(r => r !== room));
+                    }
+                }}
+            />
+        ) }
+    </div>;
+};
+
+interface IProps {
+    space: Room;
+    onFinished(leave: boolean, rooms?: Room[]): void;
+}
+
+const isOnlyAdmin = (room: Room): boolean => {
+    return !room.getJoinedMembers().some(member => {
+        return member.userId !== room.client.credentials.userId && member.powerLevelNorm === 100;
+    });
+};
+
+const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
+    const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
+    const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+
+    let rejoinWarning;
+    if (space.getJoinRule() !== JoinRule.Public) {
+        rejoinWarning = _t("You won't be able to rejoin unless you are re-invited.");
+    }
+
+    let onlyAdminWarning;
+    if (isOnlyAdmin(space)) {
+        onlyAdminWarning = _t("You're the only admin of this space. " +
+            "Leaving it will mean no one has control over it.");
+    } else {
+        const numChildrenOnlyAdminIn = roomsToLeave.filter(isOnlyAdmin).length;
+        if (numChildrenOnlyAdminIn > 0) {
+            onlyAdminWarning = _t("You're the only admin of some of the rooms or spaces you wish to leave. " +
+                "Leaving them will leave them without any admins.");
+        }
+    }
+
+    return <BaseDialog
+        title={_t("Leave %(spaceName)s", { spaceName: space.name })}
+        className="mx_LeaveSpaceDialog"
+        contentId="mx_LeaveSpaceDialog"
+        onFinished={() => onFinished(false)}
+        fixedWidth={false}
+    >
+        <div className="mx_Dialog_content" id="mx_LeaveSpaceDialog">
+            <p>
+                { _t("Are you sure you want to leave <spaceName/>?", {}, {
+                    spaceName: () => <b>{ space.name }</b>,
+                }) }
+                &nbsp;
+                { rejoinWarning }
+            </p>
+
+            { spaceChildren.length > 0 && <LeaveRoomsPicker
+                space={space}
+                spaceChildren={spaceChildren}
+                roomsToLeave={roomsToLeave}
+                setRoomsToLeave={setRoomsToLeave}
+            /> }
+
+            { onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
+                { onlyAdminWarning }
+            </div> }
+        </div>
+        <DialogButtons
+            primaryButton={_t("Leave space")}
+            onPrimaryButtonClick={() => onFinished(true, roomsToLeave)}
+            hasCancel={true}
+            onCancel={onFinished}
+        />
+    </BaseDialog>;
+};
+
+export default LeaveSpaceDialog;

src/components/views/dialogs/LogoutDialog.tsx

@@ -16,27 +16,34 @@ limitations under the License.
 */
 
 import React from 'react';
+import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    onFinished: (success: boolean) => void;
+}
+
+interface IState {
+    shouldLoadBackupStatus: boolean;
+    loading: boolean;
+    backupInfo: IKeyBackupInfo;
+    error?: string;
+}
 
 @replaceableComponent("views.dialogs.LogoutDialog")
-export default class LogoutDialog extends React.Component {
-    defaultProps = {
+export default class LogoutDialog extends React.Component<IProps, IState> {
+    static defaultProps = {
         onFinished: function() {},
     };
 
-    constructor() {
-        super();
-        this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
-        this._onExportE2eKeysClicked = this._onExportE2eKeysClicked.bind(this);
-        this._onFinished = this._onFinished.bind(this);
-        this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
-        this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
+    constructor(props) {
+        super(props);
 
         const cli = MatrixClientPeg.get();
         const shouldLoadBackupStatus = cli.isCryptoEnabled() && !cli.getKeyBackupEnabled();
@@ -49,11 +56,11 @@ export default class LogoutDialog extends React.Component {
         };
 
         if (shouldLoadBackupStatus) {
-            this._loadBackupStatus();
+            this.loadBackupStatus();
         }
     }
 
-    async _loadBackupStatus() {
+    private async loadBackupStatus() {
         try {
             const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
             this.setState({
@@ -69,29 +76,29 @@ export default class LogoutDialog extends React.Component {
         }
     }
 
-    _onSettingsLinkClick() {
+    private onSettingsLinkClick = (): void => {
         // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };
 
-    _onExportE2eKeysClicked() {
+    private onExportE2eKeysClicked = (): void => {
         Modal.createTrackedDialogAsync('Export E2E Keys', '',
             import('../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
             {
                 matrixClient: MatrixClientPeg.get(),
             },
         );
-    }
+    };
 
-    _onFinished(confirmed) {
+    private onFinished = (confirmed: boolean): void => {
         if (confirmed) {
-            dis.dispatch({action: 'logout'});
+            dis.dispatch({ action: 'logout' });
         }
         // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(confirmed);
+    };
 
-    _onSetRecoveryMethodClick() {
+    private onSetRecoveryMethodClick = (): void => {
         if (this.state.backupInfo) {
             // A key backup exists for this account, but the creating device is not
             // verified, so restore the backup which will give us the keys from it and
@@ -108,26 +115,26 @@ export default class LogoutDialog extends React.Component {
         }
 
         // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };
 
-    _onLogoutConfirm() {
-        dis.dispatch({action: 'logout'});
+    private onLogoutConfirm = (): void => {
+        dis.dispatch({ action: 'logout' });
 
         // close dialog
-        this.props.onFinished();
-    }
+        this.props.onFinished(true);
+    };
 
     render() {
         if (this.state.shouldLoadBackupStatus) {
             const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
             const description = <div>
-                <p>{_t(
+                <p>{ _t(
                     "Encrypted messages are secured with end-to-end encryption. " +
                     "Only you and the recipient(s) have the keys to read these messages.",
-                )}</p>
-                <p>{_t("Back up your keys before signing out to avoid losing them.")}</p>
+                ) }</p>
+                <p>{ _t("Back up your keys before signing out to avoid losing them.") }</p>
             </div>;
 
             let dialogContent;
@@ -152,17 +159,17 @@ export default class LogoutDialog extends React.Component {
                     </div>
                     <DialogButtons primaryButton={setupButtonCaption}
                         hasCancel={false}
-                        onPrimaryButtonClick={this._onSetRecoveryMethodClick}
+                        onPrimaryButtonClick={this.onSetRecoveryMethodClick}
                         focus={true}
                     >
-                        <button onClick={this._onLogoutConfirm}>
-                            {_t("I don't want my encrypted messages")}
+                        <button onClick={this.onLogoutConfirm}>
+                            { _t("I don't want my encrypted messages") }
                         </button>
                     </DialogButtons>
                     <details>
-                        <summary>{_t("Advanced")}</summary>
-                        <p><button onClick={this._onExportE2eKeysClicked}>
-                            {_t("Manually export keys")}
+                        <summary>{ _t("Advanced") }</summary>
+                        <p><button onClick={this.onExportE2eKeysClicked}>
+                            { _t("Manually export keys") }
                         </button></p>
                     </details>
                 </div>;
@@ -174,9 +181,9 @@ export default class LogoutDialog extends React.Component {
                 title={_t("You'll lose access to your encrypted messages")}
                 contentId='mx_Dialog_content'
                 hasCancel={true}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
             >
-                {dialogContent}
+                { dialogContent }
             </BaseDialog>);
         } else {
             const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
@@ -187,7 +194,7 @@ export default class LogoutDialog extends React.Component {
                     "Are you sure you want to sign out?",
                 )}
                 button={_t("Sign out")}
-                onFinished={this._onFinished}
+                onFinished={this.onFinished}
             />);
         }
     }

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -0,0 +1,192 @@
+/*
+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, { useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import SearchBox from "../../structures/SearchBox";
+import SpaceStore from "../../../stores/SpaceStore";
+import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps extends IDialogProps {
+    room: Room;
+    selected?: string[];
+}
+
+const Entry = ({ room, checked, onChange }) => {
+    const localRoom = room instanceof Room;
+
+    let description;
+    if (localRoom) {
+        description = _t("%(count)s members", { count: room.getJoinedMemberCount() });
+        const numChildRooms = SpaceStore.instance.getChildRooms(room.roomId).length;
+        if (numChildRooms > 0) {
+            description += " · " + _t("%(count)s rooms", { count: numChildRooms });
+        }
+    }
+
+    return <label className="mx_ManageRestrictedJoinRuleDialog_entry">
+        <div>
+            <div>
+                { localRoom
+                    ? <RoomAvatar room={room} height={20} width={20} />
+                    : <RoomAvatar oobData={room} height={20} width={20} />
+                }
+                <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{ room.name }</span>
+            </div>
+            { description && <div className="mx_ManageRestrictedJoinRuleDialog_entry_description">
+                { description }
+            </div> }
+        </div>
+        <StyledCheckbox
+            onChange={onChange ? (e) => onChange(e.target.checked) : null}
+            checked={checked}
+            disabled={!onChange}
+        />
+    </label>;
+};
+
+const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [], onFinished }) => {
+    const cli = room.client;
+    const [newSelected, setNewSelected] = useState(new Set<string>(selected));
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
+
+    const [spacesContainingRoom, otherEntries] = useMemo(() => {
+        const spaces = cli.getVisibleRooms().filter(r => r.getMyMembership() === "join" && r.isSpaceRoom());
+        return [
+            spaces.filter(r => SpaceStore.instance.getSpaceFilteredRoomIds(r).has(room.roomId)),
+            selected.map(roomId => {
+                const room = cli.getRoom(roomId);
+                if (!room) {
+                    return { roomId, name: roomId } as Room;
+                }
+                if (room.getMyMembership() !== "join" || !room.isSpaceRoom()) {
+                    return room;
+                }
+            }).filter(Boolean),
+        ];
+    }, [cli, selected, room.roomId]);
+
+    const [filteredSpacesContainingRooms, filteredOtherEntries] = useMemo(() => [
+        spacesContainingRoom.filter(r => r.name.toLowerCase().includes(lcQuery)),
+        otherEntries.filter(r => r.name.toLowerCase().includes(lcQuery)),
+    ], [spacesContainingRoom, otherEntries, lcQuery]);
+
+    const onChange = (checked: boolean, room: Room): void => {
+        if (checked) {
+            newSelected.add(room.roomId);
+        } else {
+            newSelected.delete(room.roomId);
+        }
+        setNewSelected(new Set(newSelected));
+    };
+
+    let inviteOnlyWarning;
+    if (newSelected.size < 1) {
+        inviteOnlyWarning = <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
+            { _t("You're removing all spaces. Access will default to invite only") }
+        </div>;
+    }
+
+    return <BaseDialog
+        title={_t("Select spaces")}
+        className="mx_ManageRestrictedJoinRuleDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <p>
+            { _t("Decide which spaces can access this room. " +
+                "If a space is selected, its members can find and join <RoomName/>.", {}, {
+                RoomName: () => <b>{ room.name }</b>,
+            }) }
+        </p>
+        <MatrixClientContext.Provider value={cli}>
+            <SearchBox
+                className="mx_textinput_icon mx_textinput_search"
+                placeholder={_t("Search spaces")}
+                onSearch={setQuery}
+                autoComplete={true}
+                autoFocus={true}
+            />
+            <AutoHideScrollbar className="mx_ManageRestrictedJoinRuleDialog_content">
+                { filteredSpacesContainingRooms.length > 0 ? (
+                    <div className="mx_ManageRestrictedJoinRuleDialog_section">
+                        <h3>{ _t("Spaces you know that contain this room") }</h3>
+                        { filteredSpacesContainingRooms.map(space => {
+                            return <Entry
+                                key={space.roomId}
+                                room={space}
+                                checked={newSelected.has(space.roomId)}
+                                onChange={(checked: boolean) => {
+                                    onChange(checked, space);
+                                }}
+                            />;
+                        }) }
+                    </div>
+                ) : undefined }
+
+                { filteredOtherEntries.length > 0 ? (
+                    <div className="mx_ManageRestrictedJoinRuleDialog_section">
+                        <h3>{ _t("Other spaces or rooms you might not know") }</h3>
+                        <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
+                            <div>{ _t("These are likely ones other room admins are a part of.") }</div>
+                        </div>
+                        { filteredOtherEntries.map(space => {
+                            return <Entry
+                                key={space.roomId}
+                                room={space}
+                                checked={newSelected.has(space.roomId)}
+                                onChange={(checked: boolean) => {
+                                    onChange(checked, space);
+                                }}
+                            />;
+                        }) }
+                    </div>
+                ) : null }
+
+                { filteredSpacesContainingRooms.length + filteredOtherEntries.length < 1
+                    ? <span className="mx_ManageRestrictedJoinRuleDialog_noResults">
+                        { _t("No results") }
+                    </span>
+                    : undefined
+                }
+            </AutoHideScrollbar>
+
+            <div className="mx_ManageRestrictedJoinRuleDialog_footer">
+                { inviteOnlyWarning }
+                <div className="mx_ManageRestrictedJoinRuleDialog_footer_buttons">
+                    <AccessibleButton kind="primary_outline" onClick={() => onFinished()}>
+                        { _t("Cancel") }
+                    </AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={() => onFinished(Array.from(newSelected))}>
+                        { _t("Confirm") }
+                    </AccessibleButton>
+                </div>
+            </div>
+        </MatrixClientContext.Provider>
+    </BaseDialog>;
+};
+
+export default ManageRestrictedJoinRuleDialog;
+

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js

@@ -20,11 +20,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.ManualDeviceKeyVerificationDialog")
 export default class ManualDeviceKeyVerificationDialog extends React.Component {

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import * as sdk from "../../../index";
-import {wantsDateSeparator} from '../../../DateUtils';
+import { wantsDateSeparator } from '../../../DateUtils';
 import SettingsStore from '../../../settings/SettingsStore';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.MessageEditHistoryDialog")
 export default class MessageEditHistoryDialog extends React.PureComponent {
@@ -46,7 +46,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             // bail out on backwards as we only paginate in one direction
             return false;
         }
-        const opts = {from: this.state.nextBatch};
+        const opts = { from: this.state.nextBatch };
         const roomId = this.props.mxEvent.getRoomId();
         const eventId = this.props.mxEvent.getId();
         const client = MatrixClientPeg.get();
@@ -62,7 +62,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             if (error.errcode) {
                 console.error("fetching /relations failed with error", error);
             }
-            this.setState({error}, () => reject(error));
+            this.setState({ error }, () => reject(error));
             return promise;
         }
 
@@ -131,21 +131,21 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
     render() {
         let content;
         if (this.state.error) {
-            const {error} = this.state;
+            const { error } = this.state;
             if (error.errcode === "M_UNRECOGNIZED") {
                 content = (<p className="mx_MessageEditHistoryDialog_error">
-                    {_t("Your homeserver doesn't seem to support this feature.")}
+                    { _t("Your homeserver doesn't seem to support this feature.") }
                 </p>);
             } else if (error.errcode) {
                 // some kind of error from the homeserver
                 content = (<p className="mx_MessageEditHistoryDialog_error">
-                    {_t("Something went wrong!")}
+                    { _t("Something went wrong!") }
                 </p>);
             } else {
                 content = (<p className="mx_MessageEditHistoryDialog_error">
-                    {_t("Cannot reach homeserver")}
+                    { _t("Cannot reach homeserver") }
                     <br />
-                    {_t("Ensure you have a stable internet connection, or get in touch with the server admin")}
+                    { _t("Ensure you have a stable internet connection, or get in touch with the server admin") }
                 </p>);
             }
         } else if (this.state.isLoading) {
@@ -155,18 +155,22 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
             content = (<ScrollPanel
                 className="mx_MessageEditHistoryDialog_scrollPanel"
-                onFillRequest={ this.loadMoreEdits }
+                onFillRequest={this.loadMoreEdits}
                 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');
         return (
-            <BaseDialog className='mx_MessageEditHistoryDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Message edits")}>
-                {content}
+            <BaseDialog
+                className='mx_MessageEditHistoryDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Message edits")}
+            >
+                { content }
             </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,
@@ -33,12 +33,14 @@ import {
     WidgetApiFromWidgetAction,
     WidgetKind,
 } from "matrix-widget-api";
-import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import { StopGapWidgetDriver } from "../../../stores/widgets/StopGapWidgetDriver";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+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) {
@@ -78,7 +81,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     public componentDidMount() {
         const driver = new StopGapWidgetDriver( [], this.widget, WidgetKind.Modal);
         const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
-        this.setState({messaging});
+        this.setState({ messaging });
     }
 
     public componentWillUnmount() {
@@ -99,14 +102,14 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
 
     private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
         this.props.onFinished(true, ev.detail.data);
-    }
+    };
 
     private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
         ev.preventDefault();
         const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
         if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
             return this.state.messaging.transport.reply(ev.detail, {
-                error: {message: "Invalid button"},
+                error: { message: "Invalid button" },
             } as IWidgetApiErrorResponseData);
         }
 
@@ -119,7 +122,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             tempSet.add(ev.detail.data.button);
             buttonIds = Array.from(tempSet);
         }
-        this.setState({disabledButtonIds: buttonIds});
+        this.setState({ disabledButtonIds: buttonIds });
         this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
     };
 
@@ -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);
@@ -154,7 +160,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                         break;
                     case ModalButtonKind.Secondary:
                         kind = "primary_outline";
-                        break
+                        break;
                     case ModalButtonKind.Danger:
                         kind = "danger";
                         break;
@@ -185,9 +191,9 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                     width="16"
                     alt=""
                 />
-                {_t("Data on this screen is shared with %(widgetDomain)s", {
+                { _t("Data on this screen is shared with %(widgetDomain)s", {
                     widgetDomain: parsed.hostname,
-                })}
+                }) }
             </div>
             <div>
                 <iframe

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -1,121 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import Modal from '../../../Modal';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
-import VerificationRequestDialog from './VerificationRequestDialog';
-import BaseDialog from './BaseDialog';
-import DialogButtons from '../elements/DialogButtons';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import * as sdk from '../../../index';
-
-@replaceableComponent("views.dialogs.NewSessionReviewDialog")
-export default class NewSessionReviewDialog extends React.PureComponent {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    }
-
-    onCancelClick = () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
-            headerImage: require("../../../../res/img/e2e/warning.svg"),
-            title: _t("Your account is not secure"),
-            description: <div>
-                {_t("One of the following may be compromised:")}
-                <ul>
-                    <li>{_t("Your password")}</li>
-                    <li>{_t("Your homeserver")}</li>
-                    <li>{_t("This session, or the other session")}</li>
-                    <li>{_t("The internet connection either session is using")}</li>
-                </ul>
-                <div>
-                    {_t("We recommend you change your password and Security Key in Settings immediately")}
-                </div>
-            </div>,
-            onFinished: () => this.props.onFinished(false),
-        });
-    }
-
-    onContinueClick = () => {
-        const { userId, device } = this.props;
-        const cli = MatrixClientPeg.get();
-        const requestPromise = cli.requestVerification(
-            userId,
-            [device.deviceId],
-        );
-
-        this.props.onFinished(true);
-        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
-            verificationRequestPromise: requestPromise,
-            member: cli.getUser(userId),
-            onFinished: async () => {
-                const request = await requestPromise;
-                request.cancel();
-            },
-        });
-    }
-
-    render() {
-        const { device } = this.props;
-
-        const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;
-        const titleText = _t("New session");
-
-        const title = <h2 className="mx_NewSessionReviewDialog_header">
-            {icon}
-            {titleText}
-        </h2>;
-
-        return (
-            <BaseDialog
-                title={title}
-                onFinished={this.props.onFinished}
-            >
-                <div className="mx_NewSessionReviewDialog_body">
-                    <p>{_t(
-                        "Use this session to verify your new one, " +
-                        "granting it access to encrypted messages:",
-                    )}</p>
-                    <div className="mx_NewSessionReviewDialog_deviceInfo">
-                        <div>
-                            <span className="mx_NewSessionReviewDialog_deviceName">
-                                {device.getDisplayName()}
-                            </span> <span className="mx_NewSessionReviewDialog_deviceID">
-                                ({device.deviceId})
-                            </span>
-                        </div>
-                    </div>
-                    <p>{_t(
-                        "If you didn’t sign in to this session, " +
-                        "your account may be compromised.",
-                    )}</p>
-                    <DialogButtons
-                        cancelButton={_t("This wasn't me")}
-                        cancelButtonClass="danger"
-                        primaryButton={_t("Continue")}
-                        onCancel={this.onCancelClick}
-                        onPrimaryButtonClick={this.onContinueClick}
-                    />
-                </div>
-            </BaseDialog>
-        );
-    }
-}

src/components/views/dialogs/RegistrationEmailPromptDialog.tsx

@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { _t } from '../../../languageHandler';
 import { IDialogProps } from "./IDialogProps";
-import {useRef, useState} from "react";
+import { useRef, useState } from "react";
 import Field from "../elements/Field";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import withValidation from "../elements/Validation";
@@ -40,7 +40,7 @@ const validation = withValidation({
     ],
 });
 
-const RegistrationEmailPromptDialog: React.FC<IProps> = ({onFinished}) => {
+const RegistrationEmailPromptDialog: React.FC<IProps> = ({ onFinished }) => {
     const [email, setEmail] = useState("");
     const fieldRef = useRef<Field>();
 
@@ -67,10 +67,10 @@ const RegistrationEmailPromptDialog: React.FC<IProps> = ({onFinished}) => {
         fixedWidth={false}
     >
         <div className="mx_Dialog_content" id="mx_RegistrationEmailPromptDialog">
-            <p>{_t("Just a heads up, if you don't add an email and forget your password, you could " +
+            <p>{ _t("Just a heads up, if you don't add an email and forget your password, you could " +
                 "<b>permanently lose access to your account</b>.", {}, {
-                b: sub => <b>{sub}</b>,
-            })}</p>
+                b: sub => <b>{ sub }</b>,
+            }) }</p>
             <form onSubmit={onSubmit}>
                 <Field
                     ref={fieldRef}

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,442 @@
+/*
+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 { _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";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import Field from "../elements/Field";
+import Spinner from "../elements/Spinner";
+
+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?: ExtendedNature;
+}
+
+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 NonStandardValue {
+    // 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 ExtendedNature = Nature | NonStandardValue;
+
+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 ExtendedNature });
+    };
+
+    // 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 == NonStandardValue.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 != NonStandardValue.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() {
+        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">
+                    <Spinner />
+                </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 NonStandardValue.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={NonStandardValue.Admin}
+                            checked={this.state.nature == NonStandardValue.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,21 +16,20 @@ 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 TabbedView, { Tab } from "../../structures/TabbedView";
+import { _t, _td } from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
 import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
 import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
 import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab";
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
-import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
 export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
@@ -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,
@@ -75,7 +79,10 @@ export default class RoomSettingsDialog extends React.Component {
             ROOM_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_RoomSettingsDialog_securityIcon",
-            <SecurityRoomSettingsTab roomId={this.props.roomId} />,
+            <SecurityRoomSettingsTab
+                roomId={this.props.roomId}
+                closeSettingsFn={() => this.props.onFinished(true)}
+            />,
         ));
         tabs.push(new Tab(
             ROOM_ROLES_TAB,
@@ -104,7 +111,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)}
+                />,
             ));
         }
 
@@ -112,14 +122,19 @@ export default class RoomSettingsDialog extends React.Component {
     }
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
         const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
         return (
-            <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Room Settings - %(roomName)s", {roomName})}>
+            <BaseDialog
+                className='mx_RoomSettingsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Room Settings - %(roomName)s", { roomName })}
+            >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} />
+                    <TabbedView
+                        tabs={this.getTabs()}
+                        initialTabId={this.props.initialTabId}
+                    />
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+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.
@@ -15,19 +15,29 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { upgradeRoom } from "../../../utils/RoomUpgrade";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import ErrorDialog from './ErrorDialog';
+import DialogButtons from '../elements/DialogButtons';
+import Spinner from "../elements/Spinner";
+
+interface IProps extends IDialogProps {
+    room: Room;
+}
+
+interface IState {
+    busy: boolean;
+}
 
 @replaceableComponent("views.dialogs.RoomUpgradeDialog")
-export default class RoomUpgradeDialog extends React.Component {
-    static propTypes = {
-        room: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
+    private targetVersion: string;
 
     state = {
         busy: true,
@@ -35,72 +45,66 @@ export default class RoomUpgradeDialog extends React.Component {
 
     async componentDidMount() {
         const recommended = await this.props.room.getRecommendedVersion();
-        this._targetVersion = recommended.version;
-        this.setState({busy: false});
+        this.targetVersion = recommended.version;
+        this.setState({ busy: false });
     }
 
-    _onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(false);
     };
 
-    _onUpgradeClick = () => {
-        this.setState({busy: true});
-        MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
+    private onUpgradeClick = (): void => {
+        this.setState({ busy: true });
+        upgradeRoom(this.props.room, this.targetVersion, false, false).then(() => {
             this.props.onFinished(true);
         }).catch((err) => {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to upgrade room', '', ErrorDialog, {
                 title: _t("Failed to upgrade room"),
                 description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")),
             });
         }).finally(() => {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         });
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-
         let buttons;
         if (this.state.busy) {
             buttons = <Spinner />;
         } else {
             buttons = <DialogButtons
-                primaryButton={_t(
-                    'Upgrade this room to version %(version)s',
-                    {version: this._targetVersion},
-                )}
+                primaryButton={_t('Upgrade this room to version %(version)s', { version: this.targetVersion })}
                 primaryButtonClass="danger"
                 hasCancel={true}
-                onPrimaryButtonClick={this._onUpgradeClick}
-                focus={this.props.focus}
-                onCancel={this._onCancelClick}
+                onPrimaryButtonClick={this.onUpgradeClick}
+                onCancel={this.onCancelClick}
             />;
         }
 
         return (
-            <BaseDialog className="mx_RoomUpgradeDialog"
+            <BaseDialog
+                className="mx_RoomUpgradeDialog"
                 onFinished={this.props.onFinished}
                 title={_t("Upgrade Room Version")}
                 contentId='mx_Dialog_content'
                 hasCancel={true}
             >
                 <p>
-                    {_t(
+                    { _t(
                         "Upgrading this room requires closing down the current " +
                         "instance of the room and creating a new room in its place. " +
                         "To give room members the best possible experience, we will:",
-                    )}
+                    ) }
                 </p>
                 <ol>
-                    <li>{_t("Create a new room with the same name, description and avatar")}</li>
-                    <li>{_t("Update any local room aliases to point to the new room")}</li>
-                    <li>{_t("Stop users from speaking in the old version of the room, and post a message advising users to move to the new room")}</li>
-                    <li>{_t("Put a link back to the old room at the start of the new room so people can see old messages")}</li>
+                    <li>{ _t("Create a new room with the same name, description and avatar") }</li>
+                    <li>{ _t("Update any local room aliases to point to the new room") }</li>
+                    <li>{ _t("Stop users from speaking in the old version of the room, " +
+                        "and post a message advising users to move to the new room") }</li>
+                    <li>{ _t("Put a link back to the old room at the start of the new room " +
+                        "so people can see old messages") }</li>
                 </ol>
-                {buttons}
+                { buttons }
             </BaseDialog>
         );
     }

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+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,86 +14,95 @@ 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, { ReactNode } from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import { JoinRule } from 'matrix-js-sdk/src/@types/partials';
+
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IDialogProps } from "./IDialogProps";
+import BugReportDialog from './BugReportDialog';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps {
+    roomId: string;
+    targetVersion: string;
+    description?: ReactNode;
+}
+
+interface IState {
+    inviteUsersToNewRoom: boolean;
+}
 
 @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
-export default class RoomUpgradeWarningDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        roomId: PropTypes.string.isRequired,
-        targetVersion: PropTypes.string.isRequired,
-    };
+export default class RoomUpgradeWarningDialog extends React.Component<IProps, IState> {
+    private readonly isPrivate: boolean;
+    private readonly currentVersion: string;
 
     constructor(props) {
         super(props);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        const joinRules = room ? room.currentState.getStateEvents("m.room.join_rules", "") : null;
-        const isPrivate = joinRules ? joinRules.getContent()['join_rule'] !== 'public' : true;
+        const joinRules = room?.currentState.getStateEvents(EventType.RoomJoinRules, "");
+        this.isPrivate = joinRules?.getContent()['join_rule'] !== JoinRule.Public ?? true;
+        this.currentVersion = room?.getVersion() || "1";
+
         this.state = {
-            currentVersion: room ? room.getVersion() : "1",
-            isPrivate,
             inviteUsersToNewRoom: true,
         };
     }
 
-    _onContinue = () => {
-        this.props.onFinished({continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom});
+    private onContinue = () => {
+        this.props.onFinished({ continue: true, invite: this.isPrivate && this.state.inviteUsersToNewRoom });
     };
 
-    _onCancel = () => {
-        this.props.onFinished({continue: false, invite: false});
+    private onCancel = () => {
+        this.props.onFinished({ continue: false, invite: false });
     };
 
-    _onInviteUsersToggle = (newVal) => {
-        this.setState({inviteUsersToNewRoom: newVal});
+    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean) => {
+        this.setState({ inviteUsersToNewRoom });
     };
 
-    _openBugReportDialog = (e) => {
+    private openBugReportDialog = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
     render() {
         const brand = SdkConfig.get().brand;
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         let inviteToggle = null;
-        if (this.state.isPrivate) {
+        if (this.isPrivate) {
             inviteToggle = (
                 <LabelledToggleSwitch
                     value={this.state.inviteUsersToNewRoom}
-                    onChange={this._onInviteUsersToggle}
-                    label={_t("Automatically invite users")} />
+                    onChange={this.onInviteUsersToggle}
+                    label={_t("Automatically invite members from this room to the new one")} />
             );
         }
 
-        const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
+        const title = this.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
 
         let bugReports = (
             <p>
-                {_t(
+                { _t(
                     "This usually only affects how the room is processed on the server. If you're " +
-                    "having problems with your %(brand)s, please report a bug.", {brand},
-                )}
+                    "having problems with your %(brand)s, please report a bug.", { brand },
+                ) }
             </p>
         );
         if (SdkConfig.get().bug_report_endpoint_url) {
             bugReports = (
                 <p>
-                    {_t(
+                    { _t(
                         "This usually only affects how the room is processed on the server. If you're " +
                         "having problems with your %(brand)s, please <a>report a bug</a>.",
                         {
@@ -101,10 +110,10 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                         },
                         {
                             "a": (sub) => {
-                                return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
+                                return <a href='#' onClick={this.openBugReportDialog}>{ sub }</a>;
                             },
                         },
-                    )}
+                    ) }
                 </p>
             );
         }
@@ -119,29 +128,37 @@ export default class RoomUpgradeWarningDialog extends React.Component {
             >
                 <div>
                     <p>
-                        {_t(
+                        { this.props.description || _t(
                             "Upgrading a room is an advanced action and is usually recommended when a room " +
                             "is unstable due to bugs, missing features or security vulnerabilities.",
-                        )}
+                        ) }
                     </p>
-                    {bugReports}
                     <p>
-                        {_t(
+                        { _t(
+                            "<b>Please note upgrading will make a new version of the room</b>. " +
+                            "All current messages will stay in this archived room.", {}, {
+                                b: sub => <b>{ sub }</b>,
+                            },
+                        ) }
+                    </p>
+                    { bugReports }
+                    <p>
+                        { _t(
                             "You'll upgrade this room from <oldVersion /> to <newVersion />.",
                             {},
                             {
-                                oldVersion: () => <code>{this.state.currentVersion}</code>,
-                                newVersion: () => <code>{this.props.targetVersion}</code>,
+                                oldVersion: () => <code>{ this.currentVersion }</code>,
+                                newVersion: () => <code>{ this.props.targetVersion }</code>,
                             },
-                        )}
+                        ) }
                     </p>
-                    {inviteToggle}
+                    { inviteToggle }
                 </div>
                 <DialogButtons
                     primaryButton={_t("Upgrade")}
-                    onPrimaryButtonClick={this._onContinue}
+                    onPrimaryButtonClick={this.onContinue}
                     cancelButton={_t("Cancel")}
-                    onCancel={this._onCancel}
+                    onCancel={this.onCancel}
                 />
             </BaseDialog>
         );

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -28,7 +28,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { IDialogProps } from "./IDialogProps";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
@@ -54,7 +54,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
             const header = (
                 <div className="mx_ServerOfflineDialog_content_context_timeline_header">
                     <RoomAvatar width={24} height={24} room={c.room} />
-                    <span>{c.room.name}</span>
+                    <span>{ c.room.name }</span>
                 </div>
             );
             const entries = c.transactions
@@ -63,36 +63,36 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                     let button = <Spinner w={19} h={19} />;
                     if (t.status === TransactionStatus.Error) {
                         button = (
-                            <AccessibleButton kind="link" onClick={() => t.run()}>{_t("Resend")}</AccessibleButton>
+                            <AccessibleButton kind="link" onClick={() => t.run()}>{ _t("Resend") }</AccessibleButton>
                         );
                     }
                     return (
                         <div className="mx_ServerOfflineDialog_content_context_txn" key={`txn-${j}`}>
                             <span className="mx_ServerOfflineDialog_content_context_txn_desc">
-                                {t.auditName}
+                                { t.auditName }
                             </span>
-                            {button}
+                            { button }
                         </div>
                     );
                 });
             return (
                 <div className="mx_ServerOfflineDialog_content_context" key={`context-${i}`}>
                     <div className="mx_ServerOfflineDialog_content_context_timestamp">
-                        {formatTime(c.firstFailedTime, SettingsStore.getValue("showTwelveHourTimestamps"))}
+                        { formatTime(c.firstFailedTime, SettingsStore.getValue("showTwelveHourTimestamps")) }
                     </div>
                     <div className="mx_ServerOfflineDialog_content_context_timeline">
-                        {header}
-                        {entries}
+                        { header }
+                        { entries }
                     </div>
                 </div>
-            )
+            );
         });
     }
 
     public render() {
         let timeline = this.renderTimeline().filter(c => !!c); // remove nulls for next check
         if (timeline.length === 0) {
-            timeline = [<div key={1}>{_t("You're all caught up.")}</div>];
+            timeline = [<div key={1}>{ _t("You're all caught up.") }</div>];
         }
 
         const serverName = MatrixClientPeg.getHomeserverName();
@@ -103,23 +103,23 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
             hasCancel={true}
         >
             <div className="mx_ServerOfflineDialog_content">
-                <p>{_t(
+                <p>{ _t(
                     "Your server isn't responding to some of your requests. " +
                     "Below are some of the most likely reasons.",
-                )}</p>
+                ) }</p>
                 <ul>
-                    <li>{_t("The server (%(serverName)s) took too long to respond.", {serverName})}</li>
-                    <li>{_t("Your firewall or anti-virus is blocking the request.")}</li>
-                    <li>{_t("A browser extension is preventing the request.")}</li>
-                    <li>{_t("The server is offline.")}</li>
-                    <li>{_t("The server has denied your request.")}</li>
-                    <li>{_t("Your area is experiencing difficulties connecting to the internet.")}</li>
-                    <li>{_t("A connection error occurred while trying to contact the server.")}</li>
-                    <li>{_t("The server is not configured to indicate what the problem is (CORS).")}</li>
+                    <li>{ _t("The server (%(serverName)s) took too long to respond.", { serverName }) }</li>
+                    <li>{ _t("Your firewall or anti-virus is blocking the request.") }</li>
+                    <li>{ _t("A browser extension is preventing the request.") }</li>
+                    <li>{ _t("The server is offline.") }</li>
+                    <li>{ _t("The server has denied your request.") }</li>
+                    <li>{ _t("Your area is experiencing difficulties connecting to the internet.") }</li>
+                    <li>{ _t("A connection error occurred while trying to contact the server.") }</li>
+                    <li>{ _t("The server is not configured to indicate what the problem is (CORS).") }</li>
                 </ul>
                 <hr />
-                <h2>{_t("Recent changes that have not yet been received")}</h2>
-                {timeline}
+                <h2>{ _t("Recent changes that have not yet been received") }</h2>
+                { timeline }
             </div>
         </BaseDialog>;
     }

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from "react";
-import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
+import React, { createRef } from "react";
+import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
 
-import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import BaseDialog from './BaseDialog';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
@@ -25,8 +25,8 @@ import SdkConfig from "../../../SdkConfig";
 import Field from "../elements/Field";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import TextWithTooltip from "../elements/TextWithTooltip";
-import withValidation, {IFieldState} from "../elements/Validation";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import withValidation, { IFieldState } from "../elements/Validation";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     title?: string;
@@ -110,7 +110,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                 console.error(e);
 
                 const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
-                if (stateForError.isFatalError) {
+                if (stateForError.serverErrorIsFatal) {
                     let error = _t("Unable to validate homeserver");
                     if (e.translatedMessage) {
                         error = e.translatedMessage;
@@ -168,11 +168,11 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
             text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
         }
 
-        let defaultServerName = this.defaultServer.hsName;
+        let defaultServerName: React.ReactNode = this.defaultServer.hsName;
         if (this.defaultServer.hsNameIsDifferent) {
             defaultServerName = (
                 <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>
-                    {this.defaultServer.hsName}
+                    { this.defaultServer.hsName }
                 </TextWithTooltip>
             );
         }
@@ -187,7 +187,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         >
             <form className="mx_Dialog_content" id="mx_ServerPickerDialog" onSubmit={this.onSubmit}>
                 <p>
-                    {_t("We call the places where you can host your account ‘homeservers’.")} {text}
+                    { _t("We call the places where you can host your account ‘homeservers’.") } { text }
                 </p>
 
                 <StyledRadioButton
@@ -196,7 +196,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                     checked={this.state.defaultChosen}
                     onChange={this.onDefaultChosen}
                 >
-                    {defaultServerName}
+                    { defaultServerName }
                 </StyledRadioButton>
 
                 <StyledRadioButton
@@ -205,31 +205,33 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                     className="mx_ServerPickerDialog_otherHomeserverRadio"
                     checked={!this.state.defaultChosen}
                     onChange={this.onOtherChosen}
+                    childrenInLabel={false}
                 >
                     <Field
                         type="text"
                         className="mx_ServerPickerDialog_otherHomeserver"
                         label={_t("Other homeserver")}
                         onChange={this.onHomeserverChange}
-                        onClick={this.onOtherChosen}
+                        onFocus={this.onOtherChosen}
                         ref={this.fieldRef}
                         onValidate={this.onHomeserverValidate}
                         value={this.state.otherHomeserver}
                         validateOnChange={false}
                         validateOnFocus={false}
+                        id="mx_homeserverInput"
                     />
                 </StyledRadioButton>
                 <p>
-                    {_t("Use your preferred Matrix homeserver if you have one, or host your own.")}
+                    { _t("Use your preferred Matrix homeserver if you have one, or host your own.") }
                 </p>
 
                 <AccessibleButton className="mx_ServerPickerDialog_continue" kind="primary" onClick={this.onSubmit}>
-                    {_t("Continue")}
+                    { _t("Continue") }
                 </AccessibleButton>
 
-                <h4>{_t("Learn more")}</h4>
+                <h4>{ _t("Learn more") }</h4>
                 <a href="https://matrix.org/faq/#what-is-a-homeserver%3F" target="_blank" rel="noreferrer noopener">
-                    {_t("About homeservers")}
+                    { _t("About homeservers") }
                 </a>
             </form>
         </BaseDialog>;

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
-import {IDialogProps} from "./IDialogProps";
+import { IDialogProps } from "./IDialogProps";
 
 @replaceableComponent("views.dialogs.SeshatResetDialog")
 export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
@@ -33,12 +33,12 @@ export default class SeshatResetDialog extends React.PureComponent<IDialogProps>
                 title={_t("Reset event store?")}>
                 <div>
                     <p>
-                        {_t("You most likely do not want to reset your event index store")}
+                        { _t("You most likely do not want to reset your event index store") }
                         <br />
-                        {_t("If you do, please note that none of your messages will be deleted, " +
-                            "but the search experience might be degraded for a few moments" +
+                        { _t("If you do, please note that none of your messages will be deleted, " +
+                            "but the search experience might be degraded for a few moments " +
                             "whilst the index is recreated",
-                        )}
+                        ) }
                     </p>
                 </div>
                 <DialogButtons