Merge remote-tracking branch 'upstream/develop' into feature/copy-version/17603

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

src/components/views/audio_messages/AudioPlayer.tsx

@@ -0,0 +1,124 @@
+/*
+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 "../../../voice/Playback";
+import React, { createRef, ReactNode, RefObject } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+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";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+
+    mediaName: string;
+}
+
+interface IState {
+    playbackPhase: PlaybackState;
+}
+
+@replaceableComponent("views.audio_messages.AudioPlayer")
+export default class AudioPlayer extends React.PureComponent<IProps, IState> {
+    private playPauseRef: RefObject<PlayPauseButton> = createRef();
+    private seekRef: RefObject<SeekBar> = createRef();
+
+    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.
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.prepare();
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        this.setState({ playbackPhase: ev });
+    };
+
+    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)})`;
+    }
+
+    public render(): 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/Clock.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-interface IProps {
+export interface IProps {
     seconds: number;
 }
 
@@ -28,7 +28,7 @@ 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")
+@replaceableComponent("views.audio_messages.Clock")
 export default class Clock extends React.Component<IProps, IState> {
     public constructor(props) {
         super(props);
@@ -43,6 +43,6 @@ export default class Clock extends React.Component<IProps, IState> {
     public render() {
         const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
         const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
-        return <span className='mx_Clock'>{minutes}:{seconds}</span>;
+        return <span className='mx_Clock'>{ minutes }:{ 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 "../../../voice/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

@@ -15,9 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { IRecordingUpdate, VoiceRecording } from "../../../voice/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
 
 interface IProps {
     recorder: VoiceRecording;
@@ -30,18 +31,33 @@ interface IState {
 /**
  * A clock for a live recording.
  */
-@replaceableComponent("views.voice_messages.LiveRecordingClock")
+@replaceableComponent("views.audio_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
-    public constructor(props) {
-        super(props);
+    private seconds = 0;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
 
-        this.state = {seconds: 0};
-        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    constructor(props) {
+        super(props);
+        this.state = {
+            seconds: 0,
+        };
     }
 
-    private onRecordingUpdate = (update: IRecordingUpdate) => {
-        this.setState({seconds: update.timeSeconds});
-    };
+    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,74 @@
+/*
+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 "../../../voice/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arrayFastResample } from "../../../utils/arrays";
+import { percentageOf } from "../../../utils/numbers";
+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: [],
+        };
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
+            // The incoming data is between zero and one, but typically even screaming into a
+            // microphone won't send you over 0.6, so we artificially adjust the gain for the
+            // waveform. This results in a slightly more cinematic/animated waveform for the
+            // user.
+            this.waveform = bars.map(b => percentageOf(b, 0, 0.50));
+            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

@@ -14,14 +14,15 @@ 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 React, { ReactNode } from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {_t} from "../../../languageHandler";
-import {Playback, PlaybackState} from "../../../voice/Playback";
+import { _t } from "../../../languageHandler";
+import { Playback, PlaybackState } from "../../../voice/Playback";
 import classNames from "classnames";
 
-interface IProps {
+// 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;
 
@@ -33,19 +34,25 @@ interface IProps {
  * Displays a play/pause button (activating the play/pause function of the recorder)
  * to be displayed in reference to a recording.
  */
-@replaceableComponent("views.voice_messages.PlayPauseButton")
+@replaceableComponent("views.audio_messages.PlayPauseButton")
 export default class PlayPauseButton extends React.PureComponent<IProps> {
     public constructor(props) {
         super(props);
     }
 
-    private onClick = async () => {
-        await this.props.playback.toggle();
+    private onClick = () => {
+        // noinspection JSIgnoredPromiseFromCall
+        this.toggleState();
     };
 
+    public async toggleState() {
+        await this.props.playback.toggle();
+    }
+
     public render(): ReactNode {
-        const isPlaying = this.props.playback.isPlaying;
-        const isDisabled = this.props.playbackPhase === PlaybackState.Decoding;
+        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,
@@ -56,6 +63,7 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
             title={isPlaying ? _t("Pause") : _t("Play")}
             onClick={this.onClick}
             disabled={isDisabled}
+            {...restProps}
         />;
     }
 }

src/components/views/audio_messages/PlaybackClock.tsx

@@ -15,13 +15,18 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
-import {Playback, PlaybackState} from "../../../voice/Playback";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { Playback, PlaybackState } from "../../../voice/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 {
@@ -33,7 +38,7 @@ interface IState {
 /**
  * A clock for a playback of a recording.
  */
-@replaceableComponent("views.voice_messages.PlaybackClock")
+@replaceableComponent("views.audio_messages.PlaybackClock")
 export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
@@ -54,17 +59,21 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     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});
+        this.setState({ playbackPhase: ev });
     };
 
     private onTimeUpdate = (time: number[]) => {
-        this.setState({seconds: time[0], durationSeconds: time[1]});
+        this.setState({ seconds: time[0], durationSeconds: time[1] });
     };
 
     public render() {
         let seconds = this.state.seconds;
         if (this.state.playbackPhase === PlaybackState.Stopped) {
-            seconds = this.state.durationSeconds;
+            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

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
-import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
-import {percentageOf} from "../../../utils/numbers";
+import { Playback, PLAYBACK_WAVEFORM_SAMPLES } from "../../../voice/Playback";
+import { percentageOf } from "../../../utils/numbers";
 
 interface IProps {
     playback: Playback;
@@ -33,7 +33,7 @@ interface IState {
 /**
  * A waveform which shows the waveform of a previously recorded recording
  */
-@replaceableComponent("views.voice_messages.PlaybackWaveform")
+@replaceableComponent("views.audio_messages.PlaybackWaveform")
 export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
@@ -53,13 +53,13 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
     }
 
     private onWaveformUpdate = (waveform: number[]) => {
-        this.setState({heights: this.toHeights(waveform)});
+        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});
+        this.setState({ progress });
     };
 
     public render() {

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -14,23 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Playback, PlaybackState} from "../../../voice/Playback";
-import React, {ReactNode} from "react";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import PlaybackWaveform from "./PlaybackWaveform";
+import { Playback, PlaybackState } from "../../../voice/Playback";
+import React, { ReactNode } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "../rooms/EventTile";
+import PlaybackWaveform from "./PlaybackWaveform";
 
 interface IProps {
     // Playback instance to render. Cannot change during component lifecycle: create
     // an all-new component instead.
     playback: Playback;
+
+    tileShape?: TileShape;
 }
 
 interface IState {
     playbackPhase: PlaybackState;
 }
 
+@replaceableComponent("views.audio_messages.RecordingPlayback")
 export default class RecordingPlayback extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -48,15 +53,22 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
         this.props.playback.prepare();
     }
 
+    private get isWaveformable(): boolean {
+        return this.props.tileShape !== TileShape.Notif
+            && this.props.tileShape !== TileShape.FileGrid
+            && this.props.tileShape !== TileShape.Pinned;
+    }
+
     private onPlaybackUpdate = (ev: PlaybackState) => {
-        this.setState({playbackPhase: ev});
+        this.setState({ playbackPhase: ev });
     };
 
     public render(): ReactNode {
-        return <div className='mx_VoiceMessagePrimaryContainer'>
+        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} />
-            <PlaybackWaveform playback={this.props.playback} />
-        </div>
+            { 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 "../../../voice/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

@@ -15,8 +15,13 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+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)
@@ -34,27 +39,25 @@ interface IState {
  * 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.voice_messages.Waveform")
+@replaceableComponent("views.audio_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,
     };
 
-    public constructor(props) {
-        super(props);
-    }
-
     public render() {
         return <div className='mx_Waveform'>
-            {this.props.relHeights.map((h, i) => {
+            { 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={{height: (h * 100) + '%'}} className={classes} />;
-            })}
+                return <span key={i} style={{
+                    "--barHeight": h,
+                } as WaveformCSSProperties} className={classes} />;
+            }) }
         </div>;
     }
 }

src/components/views/auth/AuthBody.js

@@ -15,7 +15,7 @@ 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 {

src/components/views/auth/AuthFooter.js

@@ -18,7 +18,7 @@ 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 {

src/components/views/auth/AuthHeader.js

@@ -18,7 +18,7 @@ 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";
 
 @replaceableComponent("views.auth.AuthHeader")
 export default class AuthHeader extends React.Component {

src/components/views/auth/AuthHeaderLogo.js

@@ -15,7 +15,7 @@ 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 {

src/components/views/auth/AuthPage.js

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

src/components/views/auth/CaptchaForm.js

@@ -14,11 +14,11 @@ 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 { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
@@ -129,9 +129,9 @@ export default class CaptchaForm extends React.Component {
 
         return (
             <div ref={this._recaptchaContainer}>
-                <p>{_t(
+                <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.js

@@ -15,7 +15,7 @@ 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 {

src/components/views/auth/CountryDropdown.js

@@ -19,10 +19,10 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 
-import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
+import { COUNTRIES, getEmojiFlag } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -18,14 +18,15 @@ import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react';
 import classNames from 'classnames';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 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
@@ -40,7 +41,7 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
  *                         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
@@ -53,8 +54,8 @@ import { LocalisedPolicy, Policies } from '../../../Terms';
  *                         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.
@@ -164,8 +165,7 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
 
         let submitButtonOrSpinner;
         if (this.props.busy) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            submitButtonOrSpinner = <Loader />;
+            submitButtonOrSpinner = <Spinner />;
         } else {
             submitButtonOrSpinner = (
                 <input type="submit"
@@ -185,8 +185,6 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
             );
         }
 
-        const Field = sdk.getComponent('elements.Field');
-
         return (
             <div>
                 <p>{ _t("Confirm your identity by entering your account password below.") }</p>
@@ -236,13 +234,11 @@ export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps
 
     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(
@@ -354,7 +350,6 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
-
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
@@ -371,7 +366,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
             newToggles[policy.id] = checked;
         }
-        this.setState({"toggledPolicies": newToggles});
+        this.setState({ "toggledPolicies": newToggles });
     }
 
     private trySubmit = () => {
@@ -382,17 +377,16 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         }
 
         if (allChecked) {
-            this.props.submitAuthDict({type: AuthType.Terms});
+            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 = [];
@@ -423,12 +417,12 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                onClick={this.trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this.trySubmit} disabled={!allChecked}>{ _t("Accept") }</button>;
         }
 
         return (
             <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 }
@@ -518,11 +512,11 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
-        this.setState({requestingToken: true});
+        this.setState({ requestingToken: true });
         this.requestMsisdnToken().catch((e) => {
             this.props.fail(e);
         }).finally(() => {
-            this.setState({requestingToken: false});
+            this.setState({ requestingToken: false });
         });
     }
 
@@ -591,8 +585,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
 
     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({
@@ -620,7 +613,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
                                 onChange={this.onTokenChange}
-                                aria-label={ _t("Code")}
+                                aria-label={_t("Code")}
                             />
                             <br />
                             <input type="submit" value={_t("Submit")}
@@ -628,7 +621,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                                 disabled={!enableSubmit}
                             />
                         </form>
-                        {errorSection}
+                        { errorSection }
                     </div>
                 </div>
             );
@@ -710,7 +703,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         // context.
 
         this.popupWindow = window.open(this.ssoUrl, "_blank");
-        this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
+        this.setState({ phase: SSOAuthEntry.PHASE_POSTAUTH });
         this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
     };
 
@@ -724,21 +717,21 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
             <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>
             );
         }
 
@@ -760,8 +753,8 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         return <React.Fragment>
             { errorSection }
             <div className="mx_InteractiveAuthEntryComponents_sso_buttons">
-                {cancelButton}
-                {continueButton}
+                { cancelButton }
+                { continueButton }
             </div>
         </React.Fragment>;
     }
@@ -832,7 +825,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
                 <a href="" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>{
                     _t("Start authentication")
                 }</a>
-                {errorSection}
+                { errorSection }
             </div>
         );
     }

src/components/views/auth/LanguageSelector.js

@@ -15,12 +15,12 @@ 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";
 
 function onChange(newLang) {
     if (getCurrentLanguage() !== newLang) {
@@ -29,7 +29,7 @@ function onChange(newLang) {
     }
 }
 
-export default function LanguageSelector({disabled}) {
+export default function LanguageSelector({ disabled }) {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');

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

@@ -20,11 +20,11 @@ import classNames from "classnames";
 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";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");

src/components/views/avatars/BaseAvatar.tsx

@@ -17,16 +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 {
@@ -63,7 +64,7 @@ const calculateUrls = (url, urls, lowBandwidth) => {
     return Array.from(new Set(_urls));
 };
 
-const useImageUrl = ({url, urls}): [string, () => void] => {
+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);
@@ -114,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);

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -24,19 +24,20 @@ 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;
     displayBadge?: boolean;
     forceCount?: boolean;
-    oobData?: object;
+    oobData?: IOOBData;
     viewAvatarOnClick?: boolean;
 }
 
@@ -121,7 +122,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
             const newIcon = this.calculateIcon();
             if (newIcon !== this.state.icon) {
-                this.setState({icon: newIcon});
+                this.setState({ icon: newIcon });
             }
         }
     };
@@ -130,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 {
@@ -204,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;
@@ -89,7 +89,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) {

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,25 +13,26 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, {ComponentProps} from 'react';
-import Room from 'matrix-js-sdk/src/models/room';
+import React, { ComponentProps } from 'react';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
-import {ResizeMethod} from "../../../Avatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import 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;
     width?: number;
     height?: number;
     resizeMethod?: ResizeMethod;
@@ -128,14 +129,17 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
+        const { room, oobData, viewAvatarOnClick, onClick, ...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) : null;
 
         return (
             <BaseAvatar {...otherProps}
                 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

@@ -17,14 +17,15 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
-import {SettingLevel} from "../../../settings/SettingLevel";
+import { SettingLevel } from "../../../settings/SettingLevel";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../../SdkConfig";
+import SettingsFlag from "../elements/SettingsFlag";
 
 interface IProps {
     title?: string;
@@ -66,7 +67,7 @@ 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 } = info;
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading, extraSettings } = info;
     const value = SettingsStore.getValue(featureId);
 
     let feedbackButton;
@@ -82,26 +83,33 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     }
 
     return <div className="mx_BetaCard">
-        <div>
-            <h3 className="mx_BetaCard_title">
-                { titleOverride || _t(title) }
-                <BetaPill />
-            </h3>
-            <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+        <div className="mx_BetaCard_columns">
             <div>
-                { 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>
+                <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>
-            { disclaimer && <div className="mx_BetaCard_disclaimer">
-                { disclaimer(value) }
-            </div> }
+            <img src={image} alt="" />
         </div>
-        <img src={image} alt="" />
+        { extraSettings && value && <div className="mx_BetaCard_relatedSettings">
+            { extraSettings.map(key => (
+                <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
+            )) }
+        </div> }
     </div>;
 };
 

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

@@ -15,11 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import AccessibleButton 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;
@@ -36,25 +37,37 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
 
         this.state = {
             value: '',
-        }
+        };
     }
 
     onDigitPress = (digit) => {
         this.props.call.sendDtmfDigit(digit);
-        this.setState({value: this.state.value + digit});
-    }
+        this.setState({ value: this.state.value + digit });
+    };
+
+    onCancelClick = () => {
+        this.props.onFinished();
+    };
+
+    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 className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        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,30 @@ 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>
+        { active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" /> }
     </MenuItemCheckbox>;
 };
 
-export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, ...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>
     </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.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2015, 2016, 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,67 +16,77 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
+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 * 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 IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
 import ForwardDialog from "../dialogs/ForwardDialog";
-import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 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) {
+export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
+interface IEventTileOps {
+    isWidgetHidden(): boolean;
+    unhideWidget(): void;
+}
+
+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 {
-    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,
-    };
-
+export default class MessageContextMenu extends React.Component<IProps, IState> {
     state = {
         canRedact: false,
         canPin: false,
     };
 
     componentDidMount() {
-        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
-        this._checkPermissions();
+        MatrixClientPeg.get().on('RoomMember.powerLevel', this.checkPermissions);
+        this.checkPermissions();
     }
 
     componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener('RoomMember.powerLevel', this._checkPermissions);
+            cli.removeListener('RoomMember.powerLevel', this.checkPermissions);
         }
     }
 
-    _checkPermissions = () => {
+    private checkPermissions = (): void => {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
 
@@ -91,10 +101,10 @@ export default class MessageContextMenu extends React.Component {
         // 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});
+        this.setState({ canRedact, canPin });
     };
 
-    _isPinned() {
+    private isPinned(): boolean {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         const pinnedEvent = room.currentState.getStateEvents(EventType.RoomPinnedEvents, '');
         if (!pinnedEvent) return false;
@@ -102,38 +112,35 @@ export default class MessageContextMenu extends React.Component {
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     }
 
-    onResendReactionsClick = () => {
-        for (const reaction of this._getUnsentReactions()) {
+    private onResendReactionsClick = (): void => {
+        for (const reaction of this.getUnsentReactions()) {
             Resend.resend(reaction);
         }
         this.closeMenu();
     };
 
-    onReportEventClick = () => {
-        const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
+    private onReportEventClick = (): void => {
         Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
             mxEvent: this.props.mxEvent,
         }, 'mx_Dialog_reportEvent');
         this.closeMenu();
     };
 
-    onViewSourceClick = () => {
-        const ViewSource = sdk.getComponent('structures.ViewSource');
+    private onViewSourceClick = (): void => {
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
             mxEvent: this.props.mxEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };
 
-    onRedactClick = () => {
-        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+    private onRedactClick = (): void => {
         Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
-            onFinished: async (proceed, reason) => {
+            onFinished: async (proceed: boolean, reason?: string) => {
                 if (!proceed) return;
 
                 const cli = MatrixClientPeg.get();
                 try {
-                    if (this.props.onCloseDialog) this.props.onCloseDialog();
+                    this.props.onCloseDialog?.();
                     await cli.redactEvent(
                         this.props.mxEvent.getRoomId(),
                         this.props.mxEvent.getId(),
@@ -146,11 +153,10 @@ export default class MessageContextMenu extends React.Component {
                     // (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}),
+                            description: _t('You cannot delete this message. (%(code)s)', { code }),
                         });
                     }
                 }
@@ -159,7 +165,7 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onForwardClick = () => {
+    private onForwardClick = (): void => {
         Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
             matrixClient: MatrixClientPeg.get(),
             event: this.props.mxEvent,
@@ -168,19 +174,19 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onPinClick = () => {
+    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, "")?.pinned || [];
+        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,
+                    ...(room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids || []),
                     eventId,
                 ],
             });
@@ -189,28 +195,25 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    closeMenu = () => {
-        if (this.props.onFinished) this.props.onFinished();
+    private closeMenu = (): void => {
+        this.props.onFinished();
     };
 
-    onUnhidePreviewClick = () => {
-        if (this.props.eventTileOps) {
-            this.props.eventTileOps.unhideWidget();
-        }
+    private onUnhidePreviewClick = (): void => {
+        this.props.eventTileOps?.unhideWidget();
         this.closeMenu();
     };
 
-    onQuoteClick = () => {
-        dis.dispatch<ComposerInsertPayload>({
+    private onQuoteClick = (): void => {
+        dis.dispatch({
             action: Action.ComposerInsert,
             event: this.props.mxEvent,
         });
         this.closeMenu();
     };
 
-    onPermalinkClick = (e: Event) => {
+    private onPermalinkClick = (e: React.MouseEvent): void => {
         e.preventDefault();
-        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
             target: this.props.mxEvent,
             permalinkCreator: this.props.permalinkCreator,
@@ -218,30 +221,27 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onCollapseReplyThreadClick = () => {
+    private onCollapseReplyThreadClick = (): void => {
         this.props.collapseReplyThread();
         this.closeMenu();
     };
 
-    _getReactions(filter) {
+    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 &&
-                relation.rel_type === "m.annotation" &&
-                relation.event_id === eventId &&
-                filter(e);
+            return relation?.rel_type === RelationType.Annotation && relation.event_id === eventId && filter(e);
         });
     }
 
-    _getPendingReactions() {
-        return this._getReactions(e => canCancel(e.status));
+    private getPendingReactions(): MatrixEvent[] {
+        return this.getReactions(e => canCancel(e.status));
     }
 
-    _getUnsentReactions() {
-        return this._getReactions(e => e.status === EventStatus.NOT_SENT);
+    private getUnsentReactions(): MatrixEvent[] {
+        return this.getReactions(e => e.status === EventStatus.NOT_SENT);
     }
 
     render() {
@@ -249,64 +249,78 @@ export default class MessageContextMenu extends React.Component {
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
-        const unsentReactionsCount = this._getUnsentReactions().length;
-        let resendReactionsButton;
-        let redactButton;
-        let forwardButton;
-        let pinButton;
-        let unhidePreviewButton;
-        let externalURLButton;
-        let quoteButton;
-        let collapseReplyThread;
+        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 = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
-                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconResend"
+                        label={_t('Resend %(unsentCount)s reaction(s)', { unsentCount: unsentReactionsCount })}
+                        onClick={this.onResendReactionsClick}
+                    />
                 );
             }
         }
 
         if (isSent && this.state.canRedact) {
             redactButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Remove') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconRedact"
+                    label={_t("Remove")}
+                    onClick={this.onRedactClick}
+                />
             );
         }
 
         if (isContentActionable(mxEvent)) {
             forwardButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                    { _t('Forward Message') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconForward"
+                    label={_t("Forward")}
+                    onClick={this.onForwardClick}
+                />
             );
 
             if (this.state.canPin) {
                 pinButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconPin"
+                        label={this.isPinned() ? _t('Unpin') : _t('Pin')}
+                        onClick={this.onPinClick}
+                    />
                 );
             }
         }
 
         const viewSourceButton = (
-            <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                { _t('View Source') }
-            </MenuItem>
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
+                label={_t("View source")}
+                onClick={this.onViewSourceClick}
+            />
         );
 
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        { _t('Unhide Preview') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconUnhidePreview"
+                        label={_t("Show preview")}
+                        onClick={this.onUnhidePreviewClick}
+                    />
                 );
             }
         }
@@ -315,79 +329,108 @@ export default class MessageContextMenu extends React.Component {
         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"
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
-                href={permalink}
-                target="_blank"
-                rel="noreferrer noopener"
-            >
-                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
-            </MenuItem>
+                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 = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-                    { _t('Quote') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconQuote"
+                    label={_t("Quote")}
+                    onClick={this.onQuoteClick}
+                />
             );
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (
-            typeof(mxEvent.event.content.external_url) === "string" &&
-            isUrlPermitted(mxEvent.event.content.external_url)
+        if (typeof (mxEvent.getContent().external_url) === "string" &&
+            isUrlPermitted(mxEvent.getContent().external_url)
         ) {
             externalURLButton = (
-                <MenuItem
-                    element="a"
-                    className="mx_MessageContextMenu_field"
-                    target="_blank"
-                    rel="noreferrer noopener"
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconLink"
                     onClick={this.closeMenu}
-                    href={mxEvent.event.content.external_url}
-                >
-                    { _t('Source URL') }
-                </MenuItem>
+                    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 = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
-                    { _t('Collapse Reply Thread') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconCollapse"
+                    label={_t("Collapse reply thread")}
+                    onClick={this.onCollapseReplyThreadClick}
+                />
             );
         }
 
-        let reportEventButton;
+        let reportEventButton: JSX.Element;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
-                    { _t('Report Content') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconReport"
+                    label={_t("Report")}
+                    onClick={this.onReportEventClick}
+                />
+            );
+        }
+
+        const commonItemsList = (
+            <IconizedContextMenuOptionList>
+                { quoteButton }
+                { forwardButton }
+                { pinButton }
+                { permalinkButton }
+                { reportEventButton }
+                { externalURLButton }
+                { unhidePreviewButton }
+                { viewSourceButton }
+                { resendReactionsButton }
+                { collapseReplyThread }
+            </IconizedContextMenuOptionList>
+        );
+
+        if (redactButton) {
+            redactItemList = (
+                <IconizedContextMenuOptionList red>
+                    { redactButton }
+                </IconizedContextMenuOptionList>
             );
         }
 
         return (
-            <div className="mx_MessageContextMenu">
-                { resendReactionsButton }
-                { redactButton }
-                { forwardButton }
-                { pinButton }
-                { viewSourceButton }
-                { unhidePreviewButton }
-                { permalinkButton }
-                { quoteButton }
-                { externalURLButton }
-                { collapseReplyThread }
-                { reportEventButton }
-            </div>
+            <IconizedContextMenu
+                {...this.props}
+                className="mx_MessageContextMenu"
+                compact={true}
+            >
+                { commonItemsList }
+                { redactItemList }
+            </IconizedContextMenu>
         );
     }
 }

src/components/views/context_menus/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,20 @@ 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}
             >
-                <span>{_t("Set status")}</span>
+                <span>{ _t("Set status") }</span>
             </AccessibleButton>;
         }
 
@@ -130,8 +130,8 @@ export default class StatusMessageContextMenu extends React.Component {
                 onChange={this._onStatusChange}
             />
             <div className="mx_StatusMessageContextMenu_actionContainer">
-                {actionButton}
-                {spinner}
+                { actionButton }
+                { spinner }
             </div>
         </form>;
 

src/components/views/context_menus/TagTileContextMenu.js

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

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -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";
@@ -54,7 +54,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     ...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);

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -14,31 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode, useContext, useMemo, useState} from "react";
+import React, { ReactNode, useContext, useMemo, useState } from "react";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { sleep } from "matrix-js-sdk/src/utils";
 
-import {_t} from '../../../languageHandler';
-import {IDialogProps} from "./IDialogProps";
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
-import {getDisplayAliasForRoom} from "../../../Rooms";
+import { getDisplayAliasForRoom } from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {sleep} from "../../../utils/promise";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
+import { 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 { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
-import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import TruncatedList from "../elements/TruncatedList";
+import EntityTile from "../rooms/EntityTile";
+import BaseAvatar from "../avatars/BaseAvatar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -204,10 +207,21 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         setSelectedToAdd(new Set(selectedToAdd));
     } : null;
 
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount, totalCount) {
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={() => setTruncateAt(totalCount)} />
+        );
+    }
+
     return <div className="mx_AddExistingToSpace">
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
+            placeholder={_t("Filter your rooms and spaces")}
             onSearch={setQuery}
             autoComplete={true}
             autoFocus={true}
@@ -216,16 +230,21 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
             { rooms.length > 0 ? (
                 <div className="mx_AddExistingToSpace_section">
                     <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selectedToAdd.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
+                    <TruncatedList
+                        truncateAt={truncateAt}
+                        createOverflowElement={overflowTile}
+                        getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                            <Entry
+                                key={room.roomId}
+                                room={room}
+                                checked={selectedToAdd.has(room)}
+                                onChange={onChange ? (checked) => {
+                                    onChange(checked, room);
+                                } : null}
+                            />,
+                        )}
+                        getChildCount={() => rooms.length}
+                    />
                 </div>
             ) : undefined }
 

src/components/views/dialogs/AddressPickerDialog.js

@@ -17,23 +17,23 @@ 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 { 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 { addressTypes, getAddressType } 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";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -457,7 +457,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({
@@ -573,13 +573,13 @@ export default class AddressPickerDialog extends React.Component {
     _getFilteredSuggestions() {
         // 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));
         });
     }
@@ -620,7 +620,7 @@ export default class AddressPickerDialog extends React.Component {
         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>;
         }
 
@@ -690,7 +690,7 @@ export default class AddressPickerDialog extends React.Component {
             && this.props.validAddressTypes.includes('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 +698,25 @@ 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}
+                { inputLabel }
                 <div className="mx_Dialog_content">
                     <div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
                     { error }

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-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 BaseDialog from "./BaseDialog";
 
 interface IProps {
     unknownProfileUsers: Array<{
@@ -50,10 +50,8 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
     };
 
     public render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
         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'
@@ -62,8 +60,8 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
                 contentId='mx_Dialog_content'
             >
                 <div id='mx_Dialog_content'>
-                    {/* eslint-disable-next-line */}
-                    <p>{_t("Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?")}</p>
+                    <p>{ _t("Unable to find profiles for the Matrix IDs listed below - " +
+                        "would you like to invite them anyway?") }</p>
                     <ul>
                         { errorList }
                     </ul>

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.
@@ -149,7 +149,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

@@ -14,28 +14,28 @@ 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";
 import SdkConfig from "../../../SdkConfig";
-import {IDialogProps} from "./IDialogProps";
+import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
-import {submitFeedback} from "../../../rageshake/submit-rageshake";
+import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import InfoDialog from "./InfoDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "./UserSettingsDialog";
 
 interface IProps extends IDialogProps {
     featureId: string;
 }
 
-const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
+const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
     const info = SettingsStore.getBetaInfo(featureId);
 
     const [comment, setComment] = useState("");
@@ -44,7 +44,12 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
     const sendFeedback = async (ok: boolean) => {
         if (!ok) return onFinished(false);
 
-        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact);
+        const extraData = SettingsStore.getBetaInfo(featureId)?.extraSettings.reduce((o, k) => {
+            o[k] = SettingsStore.getValue(k);
+            return o;
+        }, {});
+
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact, extraData);
         onFinished(true);
 
         Modal.createTrackedDialog("Beta Dialog Sent", featureId, InfoDialog, {
@@ -64,7 +69,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
             <div className="mx_BetaFeedbackDialog_subheading">
                 { _t(info.feedbackSubheading) }
                 &nbsp;
-                { _t("Your platform and username will be noted to help us use your feedback as much as we can.")}
+                { _t("Your platform and username will be noted to help us use your feedback as much as we can.") }
 
                 <AccessibleButton kind="link" onClick={() => {
                     onFinished(false);

src/components/views/dialogs/BugReportDialog.tsx

@@ -18,13 +18,17 @@ limitations under the License.
 */
 
 import React from 'react';
-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";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -68,7 +72,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onSubmit = (): void => {
         if ((!this.state.text || !this.state.text.trim()) && (!this.state.issueUrl || !this.state.issueUrl.trim())) {
@@ -93,7 +97,6 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         }).then(() => {
             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'),
@@ -110,7 +113,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                 });
             }
         });
-    }
+    };
 
     private onDownload = async (): Promise<void> => {
         this.setState({ downloadBusy: true });
@@ -139,36 +142,31 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onTextChange = (ev: React.FormEvent<HTMLTextAreaElement>): void => {
         this.setState({ text: ev.currentTarget.value });
-    }
+    };
 
     private onIssueUrlChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.setState({ issueUrl: ev.currentTarget.value });
-    }
+    };
 
     private sendProgressCallback = (progress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ progress });
-    }
+    };
 
     private downloadProgressCallback = (downloadProgress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ downloadProgress });
-    }
+    };
 
     public 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');
-
         let error = null;
         if (this.state.err) {
             error = <div className="error">
-                {this.state.err}
+                { this.state.err }
             </div>;
         }
 
@@ -176,8 +174,8 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         if (this.state.busy) {
             progress = (
                 <div className="progress">
-                    <Loader />
-                    {this.state.progress} ...
+                    <Spinner />
+                    { this.state.progress } ...
                 </div>
             );
         }
@@ -223,7 +221,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                         <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
@@ -248,8 +246,8 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                             "please include those things here.",
                         )}
                     />
-                    {progress}
-                    {error}
+                    { progress }
+                    { error }
                 </div>
                 <DialogButtons primaryButton={_t("Send logs")}
                     onPrimaryButtonClick={this.onSubmit}

src/components/views/dialogs/ChangelogDialog.tsx

@@ -16,9 +16,10 @@ Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
  */
 
 import React from 'react';
-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;
@@ -49,7 +50,7 @@ export default class ChangelogDialog extends React.Component<IProps> {
                     this.setState({ [REPOS[i]]: response.statusText });
                     return;
                 }
-                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+                this.setState({ [REPOS[i]]: JSON.parse(body).commits });
             });
         }
     }
@@ -58,16 +59,13 @@ export default class ChangelogDialog extends React.Component<IProps> {
         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>
         );
     }
 
     public render() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-
         const logs = REPOS.map(repo => {
             let content;
             if (this.state[repo] == null) {
@@ -81,19 +79,18 @@ export default class ChangelogDialog extends React.Component<IProps> {
             }
             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")}

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")}
@@ -207,16 +207,16 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
                         onClick={this.onShowMorePeople}
                         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 +225,25 @@ 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}
                             disabled={this.state.busy}
                             className="mx_CommunityPrototypeInviteDialog_primaryButton"
-                        >{buttonText}</AccessibleButton>
+                        >{ buttonText }</AccessibleButton>
                     </div>
                 </form>
             </BaseDialog>

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -15,9 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 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>;
@@ -53,14 +56,14 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
 
     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);
                 }
@@ -73,18 +76,15 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
     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}
@@ -95,7 +95,6 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
                 );
             }
         } else {
-            const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
             return <ConfirmRedactDialog onFinished={this.onParentFinished} />;
         }
     }

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -15,9 +15,9 @@ 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;
@@ -29,7 +29,6 @@ interface IProps {
 @replaceableComponent("views.dialogs.ConfirmRedactDialog")
 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")}

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -17,11 +17,14 @@ limitations under the License.
 import React from 'react';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import 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'
@@ -29,7 +32,7 @@ interface IProps {
     // group member object. Supply either this or 'member'
     groupMember: GroupMemberType;
     // needed if a group member is specified
-    matrixClient?: MatrixClient,
+    matrixClient?: MatrixClient;
     action: string; // eg. 'Ban'
     title: string; // eg. 'Ban this user?'
 
@@ -38,7 +41,7 @@ interface IProps {
     // be the string entered.
     askReason?: boolean;
     danger?: boolean;
-    onFinished: (success: boolean, reason?: HTMLInputElement) => void;
+    onFinished: (success: boolean, reason?: string) => void;
 }
 
 /*
@@ -59,11 +62,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps> {
     };
 
     public onOk = (): void => {
-        let reason;
-        if (this.reasonField) {
-            reason = this.reasonField.current;
-        }
-        this.props.onFinished(true, reason);
+        this.props.onFinished(true, this.reasonField.current?.value);
     };
 
     public onCancel = (): void => {
@@ -71,11 +70,6 @@ export default class ConfirmUserActionDialog extends React.Component<IProps> {
     };
 
     public 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");
-
         const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -15,9 +15,10 @@ limitations under the License.
 */
 
 import React from 'react';
-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;
@@ -34,9 +35,6 @@ export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         return (
             <BaseDialog
                 className='mx_ConfirmWipeDeviceDialog'
@@ -46,10 +44,10 @@ export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
             >
                 <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

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,18 +193,18 @@ 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"}}
+                                type="file" style={{ display: "none" }}
                                 ref={this.avatarUploadRef} accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
@@ -212,12 +212,12 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
                                 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,11 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-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;
@@ -83,7 +84,7 @@ export default class CreateGroupDialog extends React.Component<IProps, IState> {
         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,
@@ -95,20 +96,17 @@ export default class CreateGroupDialog extends React.Component<IProps, IState> {
             });
             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 />;
         }
@@ -169,7 +167,7 @@ export default class CreateGroupDialog extends React.Component<IProps, IState> {
                     </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.tsx

@@ -137,9 +137,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         if (activeElement) {
             activeElement.blur();
         }
-        await this.nameField.current.validate({allowEmpty: false});
+        await this.nameField.current.validate({ allowEmpty: false });
         if (this.aliasField.current) {
-            await this.aliasField.current.validate({allowEmpty: false});
+            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.
@@ -194,7 +194,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
 
     private onNameValidate = async (fieldState: IFieldState) => {
         const result = await CreateRoomDialog.validateRoomName(fieldState);
-        this.setState({nameIsValid: result.valid});
+        this.setState({ nameIsValid: result.valid });
         return result;
     };
 
@@ -224,15 +224,15 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             );
         }
 
-        let publicPrivateLabel = <p>{_t(
+        let publicPrivateLabel = <p>{ _t(
             "Private rooms can be found and joined by invitation only. Public rooms can be " +
             "found and joined by anyone.",
-        )}</p>;
+        ) }</p>;
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            publicPrivateLabel = <p>{_t(
+            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>;
+            ) }</p>;
         }
 
         let e2eeSection;
@@ -250,7 +250,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             }
             e2eeSection = <React.Fragment>
                 <LabelledToggleSwitch
-                    label={ _t("Enable end-to-end encryption")}
+                    label={_t("Enable end-to-end encryption")}
                     onChange={this.onEncryptedChange}
                     value={this.state.isEncrypted}
                     className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
@@ -276,7 +276,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         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});
+            title = _t("Create a room in %(communityName)s", { communityName: name });
         }
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
@@ -313,12 +313,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             <LabelledToggleSwitch
                                 label={_t(
                                     "Block anyone not part of %(serverName)s from ever joining this room.",
-                                    {serverName: MatrixClientPeg.getHomeserverName()},
+                                    { serverName: MatrixClientPeg.getHomeserverName() },
                                 )}
                                 onChange={this.onNoFederateChange}
                                 value={this.state.noFederate}
                             />
-                            <p>{federateLabel}</p>
+                            <p>{ federateLabel }</p>
                         </details>
                     </div>
                 </form>

src/components/views/dialogs/CryptoStoreTooNewDialog.tsx

@@ -16,21 +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";
 
 interface IProps {
     onFinished: (success: boolean) => void;
 }
 
-export default (props: IProps) => {
+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(
@@ -43,7 +44,7 @@ export default (props: IProps) => {
             focus: false,
             onFinished: (doLogout) => {
                 if (doLogout) {
-                    dis.dispatch({action: 'logout'});
+                    dis.dispatch({ action: 'logout' });
                     props.onFinished(true);
                 }
             },
@@ -58,8 +59,6 @@ export default (props: IProps) => {
             { 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")}
@@ -79,3 +78,5 @@ export default (props: IProps) => {
         </DialogButtons>
     </BaseDialog>);
 };
+
+export default CryptoStoreTooNewDialog;

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -17,15 +17,15 @@ limitations under the License.
 
 import React from 'react';
 
-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;
@@ -100,7 +100,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             if (phaseAesthetics && phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
             if (phaseAesthetics && phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
         }
-        this.setState({bodyText, continueText, continueKind});
+        this.setState({ bodyText, continueText, continueKind });
     };
 
     private onUIAuthFinished = (success: boolean, result: Error) => {
@@ -112,7 +112,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
         }
 
         console.error("Error during UI Auth:", { result });
-        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.") });
     };
 
     private onUIAuthComplete = (auth: any): void => {
@@ -123,7 +123,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             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.") });
         });
     };
 
@@ -153,20 +153,18 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             // 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.") });
             }
         });
     }
 
     public render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
@@ -174,11 +172,11 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             </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}
@@ -232,18 +230,18 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
                                 checked={this.state.shouldErase}
                                 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>

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React, { useState, useEffect, ChangeEvent, MouseEvent } from 'react';
-import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
@@ -42,6 +41,8 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { SettingLevel } from '../../../settings/SettingLevel';
+import BaseDialog from "./BaseDialog";
+import TruncatedList from "../elements/TruncatedList";
 
 interface IGenericEditorProps {
     onBack: () => void;
@@ -62,13 +63,13 @@ abstract class GenericEditor<
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         // @ts-ignore: Unsure how to convince TS this is okay when the state
         // type can be extended.
-        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
-    }
+        this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
+    };
 
     protected abstract send();
 
@@ -119,7 +120,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
     constructor(props) {
         super(props);
 
-        const {eventType, stateKey, evContent} = Object.assign({
+        const { eventType, stateKey, evContent } = Object.assign({
             eventType: '',
             stateKey: '',
             evContent: '{\n\n}',
@@ -158,7 +159,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -187,7 +188,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
-                { showTglFlip && <div style={{float: "right"}}>
+                { showTglFlip && <div style={{ float: "right" }}>
                     <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isStateEvent}
@@ -228,7 +229,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
     constructor(props) {
         super(props);
 
-        const {eventType, evContent} = Object.assign({
+        const { eventType, evContent } = Object.assign({
             eventType: '',
             evContent: '{\n\n}',
         }, this.props.inputs);
@@ -264,7 +265,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -287,7 +288,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
-                { !this.state.message && <div style={{float: "right"}}>
+                { !this.state.message && <div style={{ float: "right" }}>
                     <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isRoomAccountData}
@@ -336,7 +337,7 @@ class FilteredList extends React.PureComponent<IFilteredListProps, IFilteredList
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line
         if (this.props.children === nextProps.children && this.props.query === nextProps.query) return;
         this.setState({
             filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query),
@@ -369,7 +370,6 @@ class FilteredList extends React.PureComponent<IFilteredListProps, IFilteredList
     };
 
     render() {
-        const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
             <Field label={_t('Filter results')} autoFocus={true} size={64}
                 type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
@@ -442,19 +442,19 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (filterEventType: string) => {
         this.setState({ queryEventType: filterEventType });
-    }
+    };
 
     private onQueryStateKey = (filterStateKey: string) => {
         this.setState({ queryStateKey: filterStateKey });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -494,7 +494,7 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
                         }
 
                         return <button className={classes} key={eventType} onClick={onClickFn}>
-                            {eventType}
+                            { eventType }
                         </button>;
                     })
                 }
@@ -570,19 +570,19 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private onChange = (e: ChangeEvent<HTMLInputElement>) => {
-        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
-    }
+        this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (queryEventType: string) => {
         this.setState({ queryEventType });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -630,7 +630,7 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                <div style={{float: "right"}}>
+                <div style={{ float: "right" }}>
                     <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isRoomAccountData}
@@ -676,7 +676,7 @@ class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRo
 
     private onQuery = (query: string) => {
         this.setState({ query });
-    }
+    };
 
     render() {
         return <div>
@@ -704,7 +704,7 @@ const PHASE_MAP = {
 const VerificationRequestExplorer: React.FC<{
     txnId: string;
     request: VerificationRequest;
-}> = ({txnId, request}) => {
+}> = ({ txnId, request }) => {
     const [, updateState] = useState();
     const [timeout, setRequestTimeout] = useState(request.timeout);
 
@@ -726,20 +726,20 @@ const VerificationRequestExplorer: React.FC<{
     return (<div className="mx_DevTools_VerificationRequest">
         <dl>
             <dt>Transaction</dt>
-            <dd>{txnId}</dd>
+            <dd>{ txnId }</dd>
             <dt>Phase</dt>
-            <dd>{PHASE_MAP[request.phase] || request.phase}</dd>
+            <dd>{ PHASE_MAP[request.phase] || request.phase }</dd>
             <dt>Timeout</dt>
-            <dd>{Math.floor(timeout / 1000)}</dd>
+            <dd>{ Math.floor(timeout / 1000) }</dd>
             <dt>Methods</dt>
-            <dd>{request.methods && request.methods.join(", ")}</dd>
+            <dd>{ request.methods && request.methods.join(", ") }</dd>
             <dt>requestingUserId</dt>
-            <dd>{request.requestingUserId}</dd>
+            <dd>{ request.requestingUserId }</dd>
             <dt>observeOnly</dt>
-            <dd>{JSON.stringify(request.observeOnly)}</dd>
+            <dd>{ JSON.stringify(request.observeOnly) }</dd>
         </dl>
     </div>);
-}
+};
 
 class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     static getLabel() {
@@ -751,7 +751,7 @@ class VerificationExplorer extends React.PureComponent<IExplorerProps> {
 
     private onNewRequest = () => {
         this.forceUpdate();
-    }
+    };
 
     componentDidMount() {
         const cli = this.context;
@@ -766,17 +766,17 @@ class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     render() {
         const cli = this.context;
         const room = this.props.room;
-        const inRoomChannel = cli.crypto._inRoomVerificationRequests;
+        const inRoomChannel = cli.crypto.inRoomVerificationRequests;
         const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
 
         return (<div>
             <div className="mx_Dialog_content">
-                {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
+                { Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
                     <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
-                )}
+                ) }
             </div>
             <div className="mx_Dialog_buttons">
-                <button onClick={this.props.onBack}>{_t("Back")}</button>
+                <button onClick={this.props.onBack}>{ _t("Back") }</button>
             </div>
         </div>);
     }
@@ -806,17 +806,17 @@ class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerStat
     };
 
     private onQueryChange = (query: string) => {
-        this.setState({query});
+        this.setState({ query });
     };
 
     private onEditWidget = (widget: IApp) => {
-        this.setState({editWidget: widget});
+        this.setState({ editWidget: widget });
     };
 
     private onBack = () => {
         const widgets = WidgetStore.instance.getApps(this.props.room.roomId);
         if (this.state.editWidget && widgets.includes(this.state.editWidget)) {
-            this.setState({editWidget: null});
+            this.setState({ editWidget: null });
         } else {
             this.props.onBack();
         }
@@ -844,9 +844,9 @@ class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerStat
             const stateEv = allState.find(ev => ev.getId() === editWidget.eventId);
             if (!stateEv) { // "should never happen"
                 return <div>
-                    {_t("There was an error finding this widget.")}
+                    { _t("There was an error finding this widget.") }
                     <div className="mx_Dialog_buttons">
-                        <button onClick={this.onBack}>{_t("Back")}</button>
+                        <button onClick={this.onBack}>{ _t("Back") }</button>
                     </div>
                 </div>;
             }
@@ -865,17 +865,17 @@ class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerStat
         return (<div>
             <div className="mx_Dialog_content">
                 <FilteredList query={this.state.query} onChange={this.onQueryChange}>
-                    {widgets.map(w => {
+                    { widgets.map(w => {
                         return <button
                             className='mx_DevTools_RoomStateExplorer_button'
                             key={w.url + w.eventId}
                             onClick={() => this.onEditWidget(w)}
-                        >{w.url}</button>;
-                    })}
+                        >{ w.url }</button>;
+                    }) }
                 </FilteredList>
             </div>
             <div className="mx_Dialog_buttons">
-                <button onClick={this.onBack}>{_t("Back")}</button>
+                <button onClick={this.onBack}>{ _t("Back") }</button>
             </div>
         </div>);
     }
@@ -908,22 +908,22 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
     }
 
     private onQueryChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        this.setState({query: ev.target.value});
+        this.setState({ query: ev.target.value });
     };
 
     private onExplValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({explicitValues: ev.target.value});
+        this.setState({ explicitValues: ev.target.value });
     };
 
     private onExplRoomValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({explicitRoomValues: ev.target.value});
+        this.setState({ explicitRoomValues: ev.target.value });
     };
 
     private onBack = () => {
         if (this.state.editSetting) {
-            this.setState({editSetting: null});
+            this.setState({ editSetting: null });
         } else if (this.state.viewSetting) {
-            this.setState({viewSetting: null});
+            this.setState({ viewSetting: null });
         } else {
             this.props.onBack();
         }
@@ -931,7 +931,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
 
     private onViewClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
-        this.setState({viewSetting: settingId});
+        this.setState({ viewSetting: settingId });
     };
 
     private onEditClick = (ev: MouseEvent, settingId: string) => {
@@ -1007,7 +1007,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
     private renderCanEditLevel(roomId: string, level: SettingLevel): React.ReactNode {
         const canEdit = SettingsStore.canSetValue(this.state.editSetting, roomId, level);
         const className = canEdit ? 'mx_DevTools_SettingsExplorer_mutable' : 'mx_DevTools_SettingsExplorer_immutable';
-        return <td className={className}><code>{canEdit.toString()}</code></td>;
+        return <td className={className}><code>{ canEdit.toString() }</code></td>;
     }
 
     render() {
@@ -1028,17 +1028,17 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
                         <table>
                             <thead>
                                 <tr>
-                                    <th>{_t("Setting ID")}</th>
-                                    <th>{_t("Value")}</th>
-                                    <th>{_t("Value in this room")}</th>
+                                    <th>{ _t("Setting ID") }</th>
+                                    <th>{ _t("Value") }</th>
+                                    <th>{ _t("Value in this room") }</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                {allSettings.map(i => (
+                                { allSettings.map(i => (
                                     <tr key={i}>
                                         <td>
                                             <a href="" onClick={(e) => this.onViewClick(e, i)}>
-                                                <code>{i}</code>
+                                                <code>{ i }</code>
                                             </a>
                                             <a href="" onClick={(e) => this.onEditClick(e, i)}
                                                 className='mx_DevTools_SettingsExplorer_edit'
@@ -1047,20 +1047,20 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
                                             </a>
                                         </td>
                                         <td>
-                                            <code>{this.renderSettingValue(SettingsStore.getValue(i))}</code>
+                                            <code>{ this.renderSettingValue(SettingsStore.getValue(i)) }</code>
                                         </td>
                                         <td>
                                             <code>
-                                                {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
+                                                { this.renderSettingValue(SettingsStore.getValue(i, room.roomId)) }
                                             </code>
                                         </td>
                                     </tr>
-                                ))}
+                                )) }
                             </tbody>
                         </table>
                     </div>
                     <div className="mx_Dialog_buttons">
-                        <button onClick={this.onBack}>{_t("Back")}</button>
+                        <button onClick={this.onBack}>{ _t("Back") }</button>
                     </div>
                 </div>
             );
@@ -1068,36 +1068,36 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
             return (
                 <div>
                     <div className="mx_Dialog_content mx_DevTools_SettingsExplorer">
-                        <h3>{_t("Setting:")} <code>{this.state.editSetting}</code></h3>
+                        <h3>{ _t("Setting:") } <code>{ this.state.editSetting }</code></h3>
 
                         <div className='mx_DevTools_SettingsExplorer_warning'>
-                            <b>{_t("Caution:")}</b> {_t(
+                            <b>{ _t("Caution:") }</b> { _t(
                                 "This UI does NOT check the types of the values. Use at your own risk.",
-                            )}
+                            ) }
                         </div>
 
                         <div>
-                            {_t("Setting definition:")}
-                            <pre><code>{JSON.stringify(SETTINGS[this.state.editSetting], null, 4)}</code></pre>
+                            { _t("Setting definition:") }
+                            <pre><code>{ JSON.stringify(SETTINGS[this.state.editSetting], null, 4) }</code></pre>
                         </div>
 
                         <div>
                             <table>
                                 <thead>
                                     <tr>
-                                        <th>{_t("Level")}</th>
-                                        <th>{_t("Settable at global")}</th>
-                                        <th>{_t("Settable at room")}</th>
+                                        <th>{ _t("Level") }</th>
+                                        <th>{ _t("Settable at global") }</th>
+                                        <th>{ _t("Settable at room") }</th>
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    {LEVEL_ORDER.map(lvl => (
+                                    { LEVEL_ORDER.map(lvl => (
                                         <tr key={lvl}>
-                                            <td><code>{lvl}</code></td>
-                                            {this.renderCanEditLevel(null, lvl)}
-                                            {this.renderCanEditLevel(room.roomId, lvl)}
+                                            <td><code>{ lvl }</code></td>
+                                            { this.renderCanEditLevel(null, lvl) }
+                                            { this.renderCanEditLevel(room.roomId, lvl) }
                                         </tr>
-                                    ))}
+                                    )) }
                                 </tbody>
                             </table>
                         </div>
@@ -1122,8 +1122,8 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
 
                     </div>
                     <div className="mx_Dialog_buttons">
-                        <button onClick={this.onSaveClick}>{_t("Save setting values")}</button>
-                        <button onClick={this.onBack}>{_t("Back")}</button>
+                        <button onClick={this.onSaveClick}>{ _t("Save setting values") }</button>
+                        <button onClick={this.onBack}>{ _t("Back") }</button>
                     </div>
                 </div>
             );
@@ -1131,39 +1131,39 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
             return (
                 <div>
                     <div className="mx_Dialog_content mx_DevTools_SettingsExplorer">
-                        <h3>{_t("Setting:")} <code>{this.state.viewSetting}</code></h3>
+                        <h3>{ _t("Setting:") } <code>{ this.state.viewSetting }</code></h3>
 
                         <div>
-                            {_t("Setting definition:")}
-                            <pre><code>{JSON.stringify(SETTINGS[this.state.viewSetting], null, 4)}</code></pre>
+                            { _t("Setting definition:") }
+                            <pre><code>{ JSON.stringify(SETTINGS[this.state.viewSetting], null, 4) }</code></pre>
                         </div>
 
                         <div>
-                            {_t("Value:")}&nbsp;
-                            <code>{this.renderSettingValue(
+                            { _t("Value:") }&nbsp;
+                            <code>{ this.renderSettingValue(
                                 SettingsStore.getValue(this.state.viewSetting),
-                            )}</code>
+                            ) }</code>
                         </div>
 
                         <div>
-                            {_t("Value in this room:")}&nbsp;
-                            <code>{this.renderSettingValue(
+                            { _t("Value in this room:") }&nbsp;
+                            <code>{ this.renderSettingValue(
                                 SettingsStore.getValue(this.state.viewSetting, room.roomId),
-                            )}</code>
+                            ) }</code>
                         </div>
 
                         <div>
-                            {_t("Values at explicit levels:")}
-                            <pre><code>{this.renderExplicitSettingValues(
+                            { _t("Values at explicit levels:") }
+                            <pre><code>{ this.renderExplicitSettingValues(
                                 this.state.viewSetting, null,
-                            )}</code></pre>
+                            ) }</code></pre>
                         </div>
 
                         <div>
-                            {_t("Values at explicit levels in this room:")}
-                            <pre><code>{this.renderExplicitSettingValues(
+                            { _t("Values at explicit levels in this room:") }
+                            <pre><code>{ this.renderExplicitSettingValues(
                                 this.state.viewSetting, room.roomId,
-                            )}</code></pre>
+                            ) }</code></pre>
                         </div>
 
                     </div>
@@ -1171,7 +1171,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
                         <button onClick={(e) => this.onEditClick(e, this.state.viewSetting)}>{
                             _t("Edit Values")
                         }</button>
-                        <button onClick={this.onBack}>{_t("Back")}</button>
+                        <button onClick={this.onBack}>{ _t("Back") }</button>
                     </div>
                 </div>
             );
@@ -1221,23 +1221,23 @@ export default class DevtoolsDialog extends React.PureComponent<IProps, IState>
 
     private onBack = () => {
         this.setState({ mode: null });
-    }
+    };
 
     private onCancel = () => {
         this.props.onFinished(false);
-    }
+    };
 
     render() {
         let body;
 
         if (this.state.mode) {
             body = <MatrixClientContext.Consumer>
-                {(cli) => <React.Fragment>
+                { (cli) => <React.Fragment>
                     <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
                     <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                     <div className="mx_DevTools_label_bottom" />
                     <this.state.mode onBack={this.onBack} room={cli.getRoom(this.props.roomId)} />
-                </React.Fragment>}
+                </React.Fragment> }
             </MatrixClientContext.Consumer>;
         } else {
             const classes = "mx_DevTools_RoomStateExplorer_button";
@@ -1261,7 +1261,6 @@ export default class DevtoolsDialog extends React.PureComponent<IProps, IState>
             </React.Fragment>;
         }
 
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
                 { body }

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,23 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                         </div>
                         <div className="mx_EditCommunityPrototypeDialog_rowAvatar">
                             <input
-                                type="file" style={{display: "none"}}
+                                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,9 +26,9 @@ 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 BaseDialog from "./BaseDialog";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -57,7 +57,6 @@ export default class ErrorDialog extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         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";
@@ -30,7 +30,6 @@ const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
     "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
 const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
 
-
 export default (props) => {
     const [rating, setRating] = useState("");
     const [comment, setComment] = useState("");
@@ -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

@@ -14,31 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useState, useEffect} from "react";
+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 { 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 { _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 { 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 { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import {Alignment} from '../elements/Tooltip';
+import { Alignment } from '../elements/Tooltip';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+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 { 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;
 
@@ -171,12 +176,12 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             );
         },
         getMxcAvatarUrl: () => profileInfo.avatar_url,
-    };
+    } as RoomMember;
 
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
 
-    const spacesEnabled = useFeatureEnabled("feature_spaces");
+    const spacesEnabled = SpaceStore.spacesEnabled;
     const flairEnabled = useFeatureEnabled(UIFeature.Flair);
     const previewLayout = useSettingValue<Layout>("layout");
 
@@ -195,6 +200,17 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
         }).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"
@@ -227,15 +243,20 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             <AutoHideScrollbar className="mx_ForwardList_content">
                 { rooms.length > 0 ? (
                     <div className="mx_ForwardList_results">
-                        { rooms.map(room =>
-                            <Entry
-                                key={room.roomId}
-                                room={room}
-                                event={event}
-                                matrixClient={cli}
-                                onFinished={onFinished}
-                            />,
-                        ) }
+                        <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") }

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/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);
         });
@@ -138,7 +138,7 @@ export default class IncomingSasDialog extends React.Component {
                     url={url}
                     width={48} height={48} resizeMethod='crop'
                 />
-                <h2>{oppProfile.displayname}</h2>
+                <h2>{ oppProfile.displayname }</h2>
             </div>;
         } else if (this.state.opponentProfileError) {
             profile = <div>
@@ -146,42 +146,42 @@ export default class IncomingSasDialog extends React.Component {
                     idName={this.props.verifier.userId}
                     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 +209,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 +251,7 @@ export default class IncomingSasDialog extends React.Component {
                 onFinished={this._onFinished}
                 fixedWidth={false}
             >
-                {body}
+                { body }
             </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 {
@@ -49,7 +49,7 @@ export default class IntegrationsDisabledDialog extends React.Component {
                 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 {
@@ -45,11 +45,11 @@ export default class IntegrationsImpossibleDialog extends React.Component {
             >
                 <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/InviteDialog.tsx

@@ -17,37 +17,43 @@ limitations under the License.
 import React, { createRef } from 'react';
 import classNames from 'classnames';
 
-import {_t, _td} from "../../../languageHandler";
-import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { _t, _td } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import SdkConfig from "../../../SdkConfig";
 import * as Email from "../../../email";
-import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
-import {abbreviateUrl} from "../../../utils/UrlUtils";
+import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from "../../../utils/IdentityServerUtils";
+import { abbreviateUrl } from "../../../utils/UrlUtils";
 import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
-import {humanizeTime} from "../../../utils/humanize";
+import { humanizeTime } from "../../../utils/humanize";
 import createRoom, {
-    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+    canEncryptToAllUsers,
+    findDMForUser,
+    privateShouldBeEncrypted,
 } from "../../../createRoom";
-import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
-import {Key} from "../../../Keyboard";
-import {Action} from "../../../dispatcher/actions";
-import {DefaultTagID} from "../../../stores/room-list/models";
+import {
+    IInviteResult,
+    inviteMultipleToRoom,
+    showAnyInviteErrors,
+    showCommunityInviteDialog,
+} from "../../../RoomInvite";
+import { Key } from "../../../Keyboard";
+import { Action } from "../../../dispatcher/actions";
+import { DefaultTagID } from "../../../stores/room-list/models";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {getAddressType} from "../../../UserAddress";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { getAddressType } from "../../../UserAddress";
 import BaseAvatar from '../avatars/BaseAvatar';
 import AccessibleButton from '../elements/AccessibleButton';
 import { compare } from '../../../utils/strings';
@@ -57,27 +63,44 @@ import { copyPlaintext, selectText } from "../../../utils/strings";
 import * as ContextMenu from "../../structures/ContextMenu";
 import { toRightOf } from "../../structures/ContextMenu";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
+import { TransferCallPayload } from '../../../dispatcher/payloads/TransferCallPayload';
+import Field from '../elements/Field';
+import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';
+import Dialpad from '../voip/DialPad';
+import QuestionDialog from "./QuestionDialog";
+import Spinner from "../elements/Spinner";
+import BaseDialog from "./BaseDialog";
+import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
+import SpaceStore from "../../../stores/SpaceStore";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
 interface IRecentUser {
-    userId: string,
-    user: RoomMember,
-    lastActive: number,
+    userId: string;
+    user: RoomMember;
+    lastActive: number;
 }
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
+// NB. This dialog needs the 'mx_InviteDialog_transferWrapper' wrapper class to have the correct
+// padding on the bottom (because all modals have 24px padding on all sides), so this needs to
+// be passed when creating the modal
 export const KIND_CALL_TRANSFER = "call_transfer";
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
-// This is the interface that is expected by various components in this file. It is a bit
-// awkward because it also matches the RoomMember class from the js-sdk with some extra support
+enum TabId {
+    UserDirectory = 'users',
+    DialPad = 'dialpad',
+}
+
+// This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
+// It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
 // for 3PIDs/email addresses.
-abstract class Member {
+export abstract class Member {
     /**
      * The display name of this Member. For users this should be their profile's display
      * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
@@ -99,10 +122,11 @@ abstract class Member {
 
 class DirectoryMember extends Member {
     private readonly _userId: string;
-    private readonly displayName: string;
-    private readonly avatarUrl: string;
+    private readonly displayName?: string;
+    private readonly avatarUrl?: string;
 
-    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
+    // eslint-disable-next-line camelcase
+    constructor(userDirResult: { user_id: string, display_name?: string, avatar_url?: string }) {
         super();
         this._userId = userDirResult.user_id;
         this.displayName = userDirResult.display_name;
@@ -200,8 +224,8 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         return (
             <span className='mx_InviteDialog_userTile'>
                 <span className='mx_InviteDialog_userTile_pill'>
-                    {avatar}
-                    <span className='mx_InviteDialog_userTile_name'>{this.props.member.name}</span>
+                    { avatar }
+                    <span className='mx_InviteDialog_userTile_name'>{ this.props.member.name }</span>
                 </span>
                 { closeButton }
             </span>
@@ -243,20 +267,20 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
             // Push any text we missed (first bit/middle of text)
             if (ii > i) {
                 // Push any text we aren't highlighting (middle of text match, or beginning of text)
-                result.push(<span key={i + 'begin'}>{str.substring(i, ii)}</span>);
+                result.push(<span key={i + 'begin'}>{ str.substring(i, ii) }</span>);
             }
 
             i = ii; // copy over ii only if we have a match (to preserve i for end-of-text matching)
 
             // Highlight the word the user entered
             const substr = str.substring(i, filterStr.length + i);
-            result.push(<span className='mx_InviteDialog_roomTile_highlight' key={i + 'bold'}>{substr}</span>);
+            result.push(<span className='mx_InviteDialog_roomTile_highlight' key={i + 'bold'}>{ substr }</span>);
             i += substr.length;
         }
 
         // Push any text we missed (end of text)
         if (i < str.length) {
-            result.push(<span key={i + 'end'}>{str.substring(i)}</span>);
+            result.push(<span key={i + 'end'}>{ str.substring(i) }</span>);
         }
 
         return result;
@@ -266,7 +290,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
-            timestamp = <span className='mx_InviteDialog_roomTile_time'>{humanTs}</span>;
+            timestamp = <span className='mx_InviteDialog_roomTile_time'>{ humanTs }</span>;
         }
 
         const avatarSize = 36;
@@ -293,8 +317,8 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         // the browser from reloading the image source when the avatar remounts).
         const stackedAvatar = (
             <span className='mx_InviteDialog_roomTile_avatarStack'>
-                {avatar}
-                {checkmark}
+                { avatar }
+                { checkmark }
             </span>
         );
 
@@ -304,12 +328,12 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
 
         return (
             <div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
-                {stackedAvatar}
+                { stackedAvatar }
                 <span className="mx_InviteDialog_roomTile_nameStack">
-                    <div className='mx_InviteDialog_roomTile_name'>{this.highlightName(this.props.member.name)}</div>
-                    <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
+                    <div className='mx_InviteDialog_roomTile_name'>{ this.highlightName(this.props.member.name) }</div>
+                    <div className='mx_InviteDialog_roomTile_userId'>{ caption }</div>
                 </span>
-                {timestamp}
+                { timestamp }
             </div>
         );
     }
@@ -321,16 +345,16 @@ interface IInviteDialogProps {
 
     // The kind of invite being performed. Assumed to be KIND_DM if
     // not provided.
-    kind: string,
+    kind: string;
 
     // The room ID this dialog is for. Only required for KIND_INVITE.
-    roomId: string,
+    roomId: string;
 
     // The call to transfer. Only required for KIND_CALL_TRANSFER.
-    call: MatrixCall,
+    call: MatrixCall;
 
     // Initial value to populate the filter with
-    initialText: string,
+    initialText: string;
 }
 
 interface IInviteDialogState {
@@ -345,10 +369,12 @@ interface IInviteDialogState {
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
     consultFirst: boolean;
+    dialPadValue: string;
+    currentTabId: TabId;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
-    busy: boolean,
-    errorText: string,
+    busy: boolean;
+    errorText: string;
 }
 
 @replaceableComponent("views.dialogs.InviteDialog")
@@ -359,7 +385,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private closeCopiedTooltip: () => void;
-    private debounceTimer: NodeJS.Timeout = null; // actually number because we're in the browser
+    private debounceTimer: number = null; // actually number because we're in the browser
     private editorRef = createRef<HTMLInputElement>();
     private unmounted = false;
 
@@ -396,6 +422,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
             tryingIdentityServer: false,
             consultFirst: false,
+            dialPadValue: '',
+            currentTabId: TabId.UserDirectory,
 
             // These two flags are used for the 'Go' button to communicate what is going on.
             busy: false,
@@ -417,8 +445,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     }
 
     private onConsultFirstChange = (ev) => {
-        this.setState({consultFirst: ev.target.checked});
-    }
+        this.setState({ consultFirst: ev.target.checked });
+    };
 
     public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
@@ -473,7 +501,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 continue;
             }
 
-            recents.push({userId, user: member, lastActive: lastEventTs});
+            recents.push({ userId, user: member, lastActive: lastEventTs });
         }
         if (!recents) console.warn("[Invite:Recents] No recents to suggest!");
 
@@ -581,7 +609,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             const scoreBoost = Math.max(1, inverseTime / (15 * 60 * 1000)); // 15min segments to keep scores sane
 
             let record = memberScores[userId];
-            if (!record) record = memberScores[userId] = {score: 0};
+            if (!record) record = memberScores[userId] = { score: 0 };
             record.member = member;
             record.score += scoreBoost;
         }
@@ -598,22 +626,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return b.score - a.score;
         });
 
-        return members.map(m => ({userId: m.member.userId, user: m.member}));
+        return members.map(m => ({ userId: m.member.userId, user: m.member }));
     }
 
-    private shouldAbortAfterInviteError(result): boolean {
-        const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
-        if (failedUsers.length > 0) {
-            console.log("Failed to invite users: ", result);
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to invite the following users to chat: %(csvUsers)s", {
-                    csvUsers: failedUsers.join(", "),
-                }),
-            });
-            return true; // abort
-        }
-        return false;
+    private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
+        this.setState({ busy: false });
+        const userMap = new Map<string, Member>(this.state.targets.map(member => [member.userId, member]));
+        return !showAnyInviteErrors(result.states, room, result.inviter, userMap);
     }
 
     private convertFilter(): Member[] {
@@ -623,18 +642,18 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let newMember: Member;
         if (this.state.filterText.startsWith('@')) {
             // Assume mxid
-            newMember = new DirectoryMember({user_id: this.state.filterText, display_name: null, avatar_url: null});
+            newMember = new DirectoryMember({ user_id: this.state.filterText, display_name: null, avatar_url: null });
         } else if (SettingsStore.getValue(UIFeature.IdentityServer)) {
             // Assume email
             newMember = new ThreepidMember(this.state.filterText);
         }
         const newTargets = [...(this.state.targets || []), newMember];
-        this.setState({targets: newTargets, filterText: ''});
+        this.setState({ targets: newTargets, filterText: '' });
         return newTargets;
     }
 
     private startDm = async () => {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         const client = MatrixClientPeg.get();
         const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
@@ -657,7 +676,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return;
         }
 
-        const createRoomOptions = {inlineErrors: true} as any; // XXX: Type out `createRoomOptions`
+        const createRoomOptions = { inlineErrors: true } as any; // XXX: Type out `createRoomOptions`
 
         if (privateShouldBeEncrypted()) {
             // Check whether all users have uploaded device keys before.
@@ -696,7 +715,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         return roomOptions;
                     },
                     { invite: [], invite_3pid: [] },
-                )
+                );
             }
 
             await createRoom(createRoomOptions);
@@ -712,7 +731,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     private inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
-        this.setState({busy: true});
+        this.setState({ busy: true });
         this.convertFilter();
         const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
@@ -729,9 +748,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
 
         try {
-            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds);
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
-            if (!this.shouldAbortAfterInviteError(result)) { // handles setting error message too
+            if (!this.shouldAbortAfterInviteError(result, room)) { // handles setting error message too
                 this.props.onFinished();
             }
 
@@ -766,44 +785,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private transferCall = async () => {
-        this.convertFilter();
-        const targets = this.convertFilter();
-        const targetIds = targets.map(t => t.userId);
-        if (targetIds.length > 1) {
-            this.setState({
-                errorText: _t("A call can only be transferred to a single user."),
-            });
-        }
-
-        if (this.state.consultFirst) {
-            const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]);
-
-            dis.dispatch({
-                action: 'place_call',
-                type: this.props.call.type,
-                room_id: dmRoomId,
-                transferee: this.props.call,
-            });
-            dis.dispatch({
-                action: 'view_room',
-                room_id: dmRoomId,
-                should_peek: false,
-                joining: false,
-            });
-            this.props.onFinished();
-        } else {
-            this.setState({busy: true});
-            try {
-                await this.props.call.transfer(targetIds[0]);
-                this.setState({busy: false});
-                this.props.onFinished();
-            } catch (e) {
+        if (this.state.currentTabId == TabId.UserDirectory) {
+            this.convertFilter();
+            const targets = this.convertFilter();
+            const targetIds = targets.map(t => t.userId);
+            if (targetIds.length > 1) {
                 this.setState({
-                    busy: false,
-                    errorText: _t("Failed to transfer call"),
+                    errorText: _t("A call can only be transferred to a single user."),
                 });
+                return;
             }
+
+            dis.dispatch({
+                action: Action.TransferCallToMatrixID,
+                call: this.props.call,
+                destination: targetIds[0],
+                consultFirst: this.state.consultFirst,
+            } as TransferCallPayload);
+        } else {
+            dis.dispatch({
+                action: Action.TransferCallToPhoneNumber,
+                call: this.props.call,
+                destination: this.state.dialPadValue,
+                consultFirst: this.state.consultFirst,
+            } as TransferCallPayload);
         }
+        this.props.onFinished();
     };
 
     private onKeyDown = (e) => {
@@ -825,8 +832,12 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
     };
 
+    private onCancel = () => {
+        this.props.onFinished([]);
+    };
+
     private updateSuggestions = async (term) => {
-        MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
+        MatrixClientPeg.get().searchUserDirectory({ term }).then(async r => {
             if (term !== this.state.filterText) {
                 // Discard the results - we were probably too slow on the server-side to make
                 // these results useful. This is a race we want to avoid because we could overwrite
@@ -874,14 +885,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }).catch(e => {
             console.error("Error searching user directory:");
             console.error(e);
-            this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+            this.setState({ serverResultsMixin: [] }); // clear results because it's moderately fatal
         });
 
         // Whenever we search the directory, also try to search the identity server. It's
         // all debounced the same anyways.
         if (!this.state.canUseIdentityServer) {
             // The user doesn't have an identity server set - warn them of that.
-            this.setState({tryingIdentityServer: true});
+            this.setState({ tryingIdentityServer: true });
             return;
         }
         if (term.indexOf('@') > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
@@ -889,7 +900,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             // to a real account.
             this.setState({
                 // per above: the userId is a lie here - it's just a regular identifier
-                threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
+                threepidResultsMixin: [{ user: new ThreepidMember(term), userId: term }],
             });
             try {
                 const authClient = new IdentityAuthClient();
@@ -929,14 +940,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             } catch (e) {
                 console.error("Error searching identity server:");
                 console.error(e);
-                this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
+                this.setState({ threepidResultsMixin: [] }); // clear results because it's moderately fatal
             }
         }
     };
 
     private updateFilter = (e) => {
         const term = e.target.value;
-        this.setState({filterText: term});
+        this.setState({ filterText: term });
 
         // Debounce server lookups to reduce spam. We don't clear the existing server
         // results because they might still be vaguely accurate, likewise for races which
@@ -950,25 +961,28 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private showMoreRecents = () => {
-        this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
+        this.setState({ numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN });
     };
 
     private showMoreSuggestions = () => {
-        this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
+        this.setState({ numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN });
     };
 
     private toggleMember = (member: Member) => {
         if (!this.state.busy) {
             let filterText = this.state.filterText;
-            const targets = this.state.targets.map(t => t); // cheap clone for mutation
+            let targets = this.state.targets.map(t => t); // cheap clone for mutation
             const idx = targets.indexOf(member);
             if (idx >= 0) {
                 targets.splice(idx, 1);
             } else {
+                if (this.props.kind === KIND_CALL_TRANSFER && targets.length > 0) {
+                    targets = [];
+                }
                 targets.push(member);
                 filterText = ""; // clear the filter when the user accepts a suggestion
             }
-            this.setState({targets, filterText});
+            this.setState({ targets, filterText });
 
             if (this.editorRef && this.editorRef.current) {
                 this.editorRef.current.focus();
@@ -981,7 +995,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         const idx = targets.indexOf(member);
         if (idx >= 0) {
             targets.splice(idx, 1);
-            this.setState({targets});
+            this.setState({ targets });
         }
 
         if (this.editorRef && this.editorRef.current) {
@@ -1046,18 +1060,17 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         if (this.unmounted) return;
 
         if (failed.length > 0) {
-            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
             Modal.createTrackedDialog('Invite Paste Fail', '', QuestionDialog, {
                 title: _t('Failed to find the following users'),
                 description: _t(
                     "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s",
-                    {csvNames: failed.join(", ")},
+                    { csvNames: failed.join(", ") },
                 ),
                 button: _t('OK'),
             });
         }
 
-        this.setState({targets: [...this.state.targets, ...toAdd]});
+        this.setState({ targets: [...this.state.targets, ...toAdd] });
     };
 
     private onClickInputArea = (e) => {
@@ -1076,7 +1089,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         // Update the IS in account data. Actually using it may trigger terms.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDefaultIdentityServer();
-        this.setState({canUseIdentityServer: true, tryingIdentityServer: false});
+        this.setState({ canUseIdentityServer: true, tryingIdentityServer: false });
     };
 
     private onManageSettingsClick = (e) => {
@@ -1100,7 +1113,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
         if (kind === 'suggestions' && CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
-            sectionSubname = _t("May include members not in %(communityName)s", {communityName});
+            sectionSubname = _t("May include members not in %(communityName)s", { communityName });
         }
 
         if (this.props.kind === KIND_INVITE) {
@@ -1139,8 +1152,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             if (sourceMembers.length === 0 && !hasAdditionalMembers) {
                 return (
                     <div className='mx_InviteDialog_section'>
-                        <h3>{sectionName}</h3>
-                        <p>{_t("No results")}</p>
+                        <h3>{ sectionName }</h3>
+                        <p>{ _t("No results") }</p>
                     </div>
                 );
             }
@@ -1158,12 +1171,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         const toRender = sourceMembers.slice(0, showNum);
         const hasMore = toRender.length < sourceMembers.length;
 
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         let showMore = null;
         if (hasMore) {
             showMore = (
                 <AccessibleButton onClick={showMoreFn} kind="link">
-                    {_t("Show more")}
+                    { _t("Show more") }
                 </AccessibleButton>
             );
         }
@@ -1180,15 +1192,20 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         ));
         return (
             <div className='mx_InviteDialog_section'>
-                <h3>{sectionName}</h3>
-                {sectionSubname ? <p className="mx_InviteDialog_subname">{sectionSubname}</p> : null}
-                {tiles}
-                {showMore}
+                <h3>{ sectionName }</h3>
+                { sectionSubname ? <p className="mx_InviteDialog_subname">{ sectionSubname }</p> : null }
+                { tiles }
+                { showMore }
             </div>
         );
     }
 
     private renderEditor() {
+        const hasPlaceholder = (
+            this.props.kind == KIND_CALL_TRANSFER &&
+            this.state.targets.length === 0 &&
+            this.state.filterText.length === 0
+        );
         const targets = this.state.targets.map(t => (
             <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
         ));
@@ -1201,14 +1218,15 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 ref={this.editorRef}
                 onPaste={this.onPaste}
                 autoFocus={true}
-                disabled={this.state.busy}
+                disabled={this.state.busy || (this.props.kind == KIND_CALL_TRANSFER && this.state.targets.length > 0)}
                 autoComplete="off"
+                placeholder={hasPlaceholder ? _t("Search") : null}
             />
         );
         return (
             <div className='mx_InviteDialog_editor' onClick={this.onClickInputArea}>
-                {targets}
-                {input}
+                { targets }
+                { input }
             </div>
         );
     }
@@ -1223,7 +1241,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
         if (defaultIdentityServerUrl) {
             return (
-                <div className="mx_AddressPickerDialog_identityServer">{_t(
+                <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>.",
@@ -1231,24 +1249,46 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
                     },
                     {
-                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
-                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{ sub }</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
                     },
-                )}</div>
+                ) }</div>
             );
         } else {
             return (
-                <div className="mx_AddressPickerDialog_identityServer">{_t(
+                <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>
             );
         }
     }
 
+    private onDialFormSubmit = ev => {
+        ev.preventDefault();
+        this.transferCall();
+    };
+
+    private onDialChange = ev => {
+        this.setState({ dialPadValue: ev.currentTarget.value });
+    };
+
+    private onDigitPress = digit => {
+        this.setState({ dialPadValue: this.state.dialPadValue + digit });
+    };
+
+    private onDeletePress = () => {
+        if (this.state.dialPadValue.length === 0) return;
+        this.setState({ dialPadValue: this.state.dialPadValue.slice(0, -1) });
+    };
+
+    private onTabChange = (tabId: TabId) => {
+        this.setState({ currentTabId: tabId });
+    };
+
     private async onLinkClick(e) {
         e.preventDefault();
         selectText(e.target);
@@ -1269,10 +1309,6 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        const Spinner = sdk.getComponent("elements.Spinner");
-
         let spinner = null;
         if (this.state.busy) {
             spinner = <Spinner w={20} h={20} />;
@@ -1282,12 +1318,16 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let helpText;
         let buttonText;
         let goButtonFn;
+        let consultConnectSection;
         let extraSection;
         let footer;
         let keySharingWarning = <span />;
 
         const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer);
 
+        const hasSelection = this.state.targets.length > 0
+            || (this.state.filterText && this.state.filterText.includes('@'));
+
         const cli = MatrixClientPeg.get();
         const userId = cli.getUserId();
         if (this.props.kind === KIND_DM) {
@@ -1297,21 +1337,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 helpText = _t(
                     "Start a conversation with someone using their name, email address or username (like <userId/>).",
                     {},
-                    {userId: () => {
+                    { userId: () => {
                         return (
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
+                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{ userId }</a>
                         );
-                    }},
+                    } },
                 );
             } else {
                 helpText = _t(
                     "Start a conversation with someone using their name or username (like <userId/>).",
                     {},
-                    {userId: () => {
+                    { userId: () => {
                         return (
-                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
+                            <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{ userId }</a>
                         );
-                    }},
+                    } },
                 );
             }
 
@@ -1320,14 +1360,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 const inviteText = _t(
                     "This won't invite them to %(communityName)s. " +
                     "To invite someone to %(communityName)s, click <a>here</a>",
-                    {communityName}, {
+                    { communityName }, {
                         userId: () => {
                             return (
                                 <a
                                     href={makeUserPermalink(userId)}
                                     rel="noreferrer noopener"
                                     target="_blank"
-                                >{userId}</a>
+                                >{ userId }</a>
                             );
                         },
                         a: (sub) => {
@@ -1335,13 +1375,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                                 <AccessibleButton
                                     kind="link"
                                     onClick={this.onCommunityInviteClick}
-                                >{sub}</AccessibleButton>
+                                >{ sub }</AccessibleButton>
                             );
                         },
                     },
                 );
                 helpText = <React.Fragment>
-                    { helpText } {inviteText}
+                    { helpText } { inviteText }
                 </React.Fragment>;
             }
             buttonText = _t("Go");
@@ -1365,10 +1405,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         <div />
                     </AccessibleTooltipButton>
                 </div>
-            </div>
+            </div>;
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
-            const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
+            const isSpace = SpaceStore.spacesEnabled && room?.isSpaceRoom();
             title = isSpace
                 ? _t("Invite to %(spaceName)s", {
                     spaceName: room.name || _t("Unnamed Space"),
@@ -1398,9 +1438,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
             helpText = _t(helpTextUntranslated, {}, {
                 userId: () =>
-                    <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
+                    <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{ userId }</a>,
                 a: (sub) =>
-                    <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
+                    <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{ sub }</a>,
             });
 
             buttonText = _t("Invite");
@@ -1419,29 +1459,122 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                             <img
                                 src={require("../../../../res/img/element-icons/info.svg")}
                                 width={14} height={14} />
-                            {" " + _t("Invited people will be able to read old messages.")}
+                            { " " + _t("Invited people will be able to read old messages.") }
                         </p>;
                 }
             }
         } else if (this.props.kind === KIND_CALL_TRANSFER) {
             title = _t("Transfer");
-            buttonText = _t("Transfer");
-            goButtonFn = this.transferCall;
-            footer = <div>
+
+            consultConnectSection = <div className="mx_InviteDialog_transferConsultConnect">
                 <label>
                     <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
-                    {_t("Consult first")}
+                    { _t("Consult first") }
                 </label>
+                <AccessibleButton
+                    kind="secondary"
+                    onClick={this.onCancel}
+                    className='mx_InviteDialog_transferConsultConnect_pushRight'
+                >
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <AccessibleButton
+                    kind="primary"
+                    onClick={this.transferCall}
+                    className='mx_InviteDialog_transferButton'
+                    disabled={!hasSelection && this.state.dialPadValue === ''}
+                >
+                    { _t("Transfer") }
+                </AccessibleButton>
             </div>;
         } else {
             console.error("Unknown kind of InviteDialog: " + this.props.kind);
         }
 
-        const hasSelection = this.state.targets.length > 0
-            || (this.state.filterText && this.state.filterText.includes('@'));
+        const goButton = this.props.kind == KIND_CALL_TRANSFER ? null : <AccessibleButton
+            kind="primary"
+            onClick={goButtonFn}
+            className='mx_InviteDialog_goButton'
+            disabled={this.state.busy || !hasSelection}
+        >
+            { buttonText }
+        </AccessibleButton>;
+
+        const usersSection = <React.Fragment>
+            <p className='mx_InviteDialog_helpText'>{ helpText }</p>
+            <div className='mx_InviteDialog_addressBar'>
+                { this.renderEditor() }
+                <div className='mx_InviteDialog_buttonAndSpinner'>
+                    { goButton }
+                    { spinner }
+                </div>
+            </div>
+            { keySharingWarning }
+            { this.renderIdentityServerWarning() }
+            <div className='error'>{ this.state.errorText }</div>
+            <div className='mx_InviteDialog_userSections'>
+                { this.renderSection('recents') }
+                { this.renderSection('suggestions') }
+                { extraSection }
+            </div>
+            { footer }
+        </React.Fragment>;
+
+        let dialogContent;
+        if (this.props.kind === KIND_CALL_TRANSFER) {
+            const tabs = [];
+            tabs.push(new Tab(
+                TabId.UserDirectory, _td("User Directory"), 'mx_InviteDialog_userDirectoryIcon', usersSection,
+            ));
+
+            const backspaceButton = (
+                <DialPadBackspaceButton onBackspacePress={this.onDeletePress} />
+            );
+
+            // Only show the backspace button if the field has content
+            let dialPadField;
+            if (this.state.dialPadValue.length !== 0) {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                    postfixComponent={backspaceButton}
+                />;
+            } else {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                />;
+            }
+
+            const dialPadSection = <div className="mx_InviteDialog_dialPad">
+                <form onSubmit={this.onDialFormSubmit}>
+                    { dialPadField }
+                </form>
+                <Dialpad hasDial={false}
+                    onDigitPress={this.onDigitPress} onDeletePress={this.onDeletePress}
+                />
+            </div>;
+            tabs.push(new Tab(TabId.DialPad, _td("Dial pad"), 'mx_InviteDialog_dialPadIcon', dialPadSection));
+            dialogContent = <React.Fragment>
+                <TabbedView tabs={tabs} initialTabId={this.state.currentTabId}
+                    tabLocation={TabLocation.TOP} onChange={this.onTabChange}
+                />
+                { consultConnectSection }
+            </React.Fragment>;
+        } else {
+            dialogContent = <React.Fragment>
+                { usersSection }
+                { consultConnectSection }
+            </React.Fragment>;
+        }
+
         return (
             <BaseDialog
-                className={classNames("mx_InviteDialog", {
+                className={classNames({
+                    mx_InviteDialog_transfer: this.props.kind === KIND_CALL_TRANSFER,
+                    mx_InviteDialog_other: this.props.kind !== KIND_CALL_TRANSFER,
                     mx_InviteDialog_hasFooter: !!footer,
                 })}
                 hasCancel={true}
@@ -1449,30 +1582,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 title={title}
             >
                 <div className='mx_InviteDialog_content'>
-                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
-                    <div className='mx_InviteDialog_addressBar'>
-                        {this.renderEditor()}
-                        <div className='mx_InviteDialog_buttonAndSpinner'>
-                            <AccessibleButton
-                                kind="primary"
-                                onClick={goButtonFn}
-                                className='mx_InviteDialog_goButton'
-                                disabled={this.state.busy || !hasSelection}
-                            >
-                                {buttonText}
-                            </AccessibleButton>
-                            {spinner}
-                        </div>
-                    </div>
-                    {keySharingWarning}
-                    {this.renderIdentityServerWarning()}
-                    <div className='error'>{this.state.errorText}</div>
-                    <div className='mx_InviteDialog_userSections'>
-                        {this.renderSection('recents')}
-                        {this.renderSection('suggestions')}
-                        {extraSection}
-                    </div>
-                    {footer}
+                    { dialogContent }
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -14,7 +14,7 @@ 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';
@@ -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> :
+            { success ?
+                <span>{ _t("Upload completed") }</span> :
                 cancelled ?
-                    <span>{_t("Cancelled signature upload")}</span> :
-                    <span>{_t("Unable to upload")}</span>}
+                    <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/LogoutDialog.js

@@ -22,7 +22,7 @@ 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";
 
 @replaceableComponent("views.dialogs.LogoutDialog")
 export default class LogoutDialog extends React.Component {
@@ -85,7 +85,7 @@ export default class LogoutDialog extends React.Component {
 
     _onFinished(confirmed) {
         if (confirmed) {
-            dis.dispatch({action: 'logout'});
+            dis.dispatch({ action: 'logout' });
         }
         // close dialog
         this.props.onFinished();
@@ -112,7 +112,7 @@ export default class LogoutDialog extends React.Component {
     }
 
     _onLogoutConfirm() {
-        dis.dispatch({action: 'logout'});
+        dis.dispatch({ action: 'logout' });
 
         // close dialog
         this.props.onFinished();
@@ -123,11 +123,11 @@ export default class LogoutDialog extends React.Component {
             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;
@@ -156,13 +156,13 @@ export default class LogoutDialog extends React.Component {
                         focus={true}
                     >
                         <button onClick={this._onLogoutConfirm}>
-                            {_t("I don't want my encrypted messages")}
+                            { _t("I don't want my encrypted messages") }
                         </button>
                     </DialogButtons>
                     <details>
-                        <summary>{_t("Advanced")}</summary>
+                        <summary>{ _t("Advanced") }</summary>
                         <p><button onClick={this._onExportE2eKeysClicked}>
-                            {_t("Manually export keys")}
+                            { _t("Manually export keys") }
                         </button></p>
                     </details>
                 </div>;
@@ -176,7 +176,7 @@ export default class LogoutDialog extends React.Component {
                 hasCancel={true}
                 onFinished={this._onFinished}
             >
-                {dialogContent}
+                { dialogContent }
             </BaseDialog>);
         } else {
             const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');

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,11 +155,11 @@ 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">{this._renderEdits()}</ul>
+                <ul className="mx_MessageEditHistoryDialog_edits">{ this._renderEdits() }</ul>
             </ScrollPanel>);
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -170,7 +170,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={_t("Message edits")}
             >
-                {content}
+                { content }
             </BaseDialog>
         );
     }

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -33,13 +33,13 @@ 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 {ELEMENT_CLIENT_ID} from "../../../identifiers";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
@@ -63,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) {
@@ -80,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() {
@@ -101,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);
         }
 
@@ -121,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);
     };
 
@@ -159,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;
@@ -190,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.tsx

@@ -15,17 +15,20 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { ensureDMExists } from "../../../createRoom";
 import { IDialogProps } from "./IDialogProps";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { 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 { 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;
@@ -37,10 +40,9 @@ interface IState {
     busy: boolean;
     err?: string;
     // If we know it, the nature of the abuse, as specified by MSC3215.
-    nature?: EXTENDED_NATURE;
+    nature?: ExtendedNature;
 }
 
-
 const MODERATED_BY_STATE_EVENT_TYPE = [
     "org.matrix.msc3215.room.moderation.moderated_by",
     /**
@@ -53,29 +55,29 @@ const MODERATED_BY_STATE_EVENT_TYPE = [
 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 Nature {
+    Disagreement = "org.matrix.msc3215.abuse.nature.disagreement",
+    Toxic = "org.matrix.msc3215.abuse.nature.toxic",
+    Illegal = "org.matrix.msc3215.abuse.nature.illegal",
+    Spam = "org.matrix.msc3215.abuse.nature.spam",
+    Other = "org.matrix.msc3215.abuse.nature.other",
 }
 
-enum NON_STANDARD_NATURE {
+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"
+    Admin = "non-standard.abuse.nature.admin"
 }
 
-type EXTENDED_NATURE = NATURE | NON_STANDARD_NATURE;
+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.
  *
@@ -162,13 +164,13 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
     }
 
     // The user has written down a freeform description of the abuse.
-    private onReasonChange = ({target: {value: reason}}): void => {
+    private onReasonChange = ({ target: { value: reason } }): void => {
         this.setState({ reason });
     };
 
     // The user has clicked on a nature.
     private onNatureChosen = (e: React.FormEvent<HTMLInputElement>): void => {
-        this.setState({ nature: e.currentTarget.value as EXTENDED_NATURE});
+        this.setState({ nature: e.currentTarget.value as ExtendedNature });
     };
 
     // The user has clicked "cancel".
@@ -185,7 +187,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             // We need a nature.
             // If the nature is `NATURE.OTHER` or `NON_STANDARD_NATURE.ADMIN`, we also need a `reason`.
             if (!this.state.nature ||
-                    ((this.state.nature == NATURE.OTHER || this.state.nature == NON_STANDARD_NATURE.ADMIN)
+                    ((this.state.nature == Nature.Other || this.state.nature == NonStandardValue.Admin)
                         && !reason)
             ) {
                 this.setState({
@@ -212,8 +214,8 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         try {
             const client = MatrixClientPeg.get();
             const ev = this.props.mxEvent;
-            if (this.moderation && this.state.nature != NON_STANDARD_NATURE.ADMIN) {
-                const nature: NATURE = this.state.nature;
+            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.
@@ -240,15 +242,10 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
     };
 
     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}
+                { this.state.err }
             </div>;
         }
 
@@ -256,7 +253,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         if (this.state.busy) {
             progress = (
                 <div className="progress">
-                    <Loader />
+                    <Spinner />
                 </div>
             );
         }
@@ -277,27 +274,27 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             const homeServerName = SdkConfig.get()["validated_server_config"].hsName;
             let subtitle;
             switch (this.state.nature) {
-                case NATURE.DISAGREEMENT:
+                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:
+                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:
+                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:
+                case Nature.Spam:
                     subtitle = _t("This user is spamming the room with ads, links to ads or to propaganda.\n" +
                         "This will be reported to the room moderators.");
                     break;
-                case NON_STANDARD_NATURE.ADMIN:
+                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" +
@@ -311,7 +308,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                         { homeserver: homeServerName });
                     }
                     break;
-                case NATURE.OTHER:
+                case Nature.Other:
                     subtitle = _t("Any other reason. Please describe the problem.\n" +
                         "This will be reported to the room moderators.");
                     break;
@@ -329,55 +326,55 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                 >
                     <div>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NATURE.DISAGREEMENT }
-                            checked = { this.state.nature == NATURE.DISAGREEMENT }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={Nature.Disagreement}
+                            checked={this.state.nature == Nature.Disagreement}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Disagree')}
+                            { _t('Disagree') }
                         </StyledRadioButton>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NATURE.TOXIC }
-                            checked = { this.state.nature == NATURE.TOXIC }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={Nature.Toxic}
+                            checked={this.state.nature == Nature.Toxic}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Toxic Behaviour')}
+                            { _t('Toxic Behaviour') }
                         </StyledRadioButton>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NATURE.ILLEGAL }
-                            checked = { this.state.nature == NATURE.ILLEGAL }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={Nature.Illegal}
+                            checked={this.state.nature == Nature.Illegal}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Illegal Content')}
+                            { _t('Illegal Content') }
                         </StyledRadioButton>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NATURE.SPAM }
-                            checked = { this.state.nature == NATURE.SPAM }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={Nature.Spam}
+                            checked={this.state.nature == Nature.Spam}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Spam or propaganda')}
+                            { _t('Spam or propaganda') }
                         </StyledRadioButton>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NON_STANDARD_NATURE.ADMIN }
-                            checked = { this.state.nature == NON_STANDARD_NATURE.ADMIN }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={NonStandardValue.Admin}
+                            checked={this.state.nature == NonStandardValue.Admin}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Report the entire room')}
+                            { _t('Report the entire room') }
                         </StyledRadioButton>
                         <StyledRadioButton
-                            name = "nature"
-                            value = { NATURE.OTHER }
-                            checked = { this.state.nature == NATURE.OTHER }
-                            onChange = { this.onNatureChosen }
+                            name="nature"
+                            value={Nature.Other}
+                            checked={this.state.nature == Nature.Other}
+                            onChange={this.onNatureChosen}
                         >
-                            {_t('Other')}
+                            { _t('Other') }
                         </StyledRadioButton>
                         <p>
-                            {subtitle}
+                            { subtitle }
                         </p>
                         <Field
                             className="mx_ReportEventDialog_reason"
@@ -388,8 +385,8 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                             value={this.state.reason}
                             disabled={this.state.busy}
                         />
-                        {progress}
-                        {error}
+                        { progress }
+                        { error }
                     </div>
                     <DialogButtons
                         primaryButton={_t("Send report")}
@@ -419,7 +416,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                                 "or images.")
                         }
                     </p>
-                    {adminMessage}
+                    { adminMessage }
                     <Field
                         className="mx_ReportEventDialog_reason"
                         element="textarea"
@@ -429,8 +426,8 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                         value={this.state.reason}
                         disabled={this.state.busy}
                     />
-                    {progress}
-                    {error}
+                    { progress }
+                    { error }
                 </div>
                 <DialogButtons
                     primaryButton={_t("Send report")}

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -16,20 +16,20 @@ limitations under the License.
 */
 
 import React from 'react';
-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";
@@ -108,7 +108,10 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
                 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)}
+                />,
             ));
         }
 
@@ -116,15 +119,13 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
     }
 
     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})}
+                title={_t("Room Settings - %(roomName)s", { roomName })}
             >
                 <div className='mx_SettingsDialog_content'>
                     <TabbedView

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -17,10 +17,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.RoomUpgradeDialog")
 export default class RoomUpgradeDialog extends React.Component {
@@ -36,7 +36,7 @@ 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.setState({ busy: false });
     }
 
     _onCancelClick = () => {
@@ -44,7 +44,7 @@ export default class RoomUpgradeDialog extends React.Component {
     };
 
     _onUpgradeClick = () => {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
             this.props.onFinished(true);
         }).catch((err) => {
@@ -54,7 +54,7 @@ export default class RoomUpgradeDialog extends React.Component {
                 description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")),
             });
         }).finally(() => {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         });
     };
 
@@ -70,7 +70,7 @@ export default class RoomUpgradeDialog extends React.Component {
             buttons = <DialogButtons
                 primaryButton={_t(
                     'Upgrade this room to version %(version)s',
-                    {version: this._targetVersion},
+                    { version: this._targetVersion },
                 )}
                 primaryButtonClass="danger"
                 hasCancel={true}
@@ -88,19 +88,19 @@ export default class RoomUpgradeDialog extends React.Component {
                 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.js

@@ -16,13 +16,13 @@ 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 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";
 
 @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
 export default class RoomUpgradeWarningDialog extends React.Component {
@@ -46,15 +46,15 @@ export default class RoomUpgradeWarningDialog extends React.Component {
     }
 
     _onContinue = () => {
-        this.props.onFinished({continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom});
+        this.props.onFinished({ continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom });
     };
 
     _onCancel = () => {
-        this.props.onFinished({continue: false, invite: false});
+        this.props.onFinished({ continue: false, invite: false });
     };
 
     _onInviteUsersToggle = (newVal) => {
-        this.setState({inviteUsersToNewRoom: newVal});
+        this.setState({ inviteUsersToNewRoom: newVal });
     };
 
     _openBugReportDialog = (e) => {
@@ -84,16 +84,16 @@ export default class RoomUpgradeWarningDialog extends React.Component {
 
         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 +101,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,23 +119,23 @@ export default class RoomUpgradeWarningDialog extends React.Component {
             >
                 <div>
                     <p>
-                        {_t(
+                        { _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}
+                    { bugReports }
                     <p>
-                        {_t(
+                        { _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.state.currentVersion }</code>,
+                                newVersion: () => <code>{ this.props.targetVersion }</code>,
                             },
-                        )}
+                        ) }
                     </p>
-                    {inviteToggle}
+                    { inviteToggle }
                 </div>
                 <DialogButtons
                     primaryButton={_t("Upgrade")}

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

@@ -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;
@@ -172,7 +172,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         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,13 +205,14 @@ 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}
@@ -221,16 +222,16 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                     />
                 </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, " +
+                        { _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

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -22,7 +22,7 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.SessionRestoreErrorDialog")
 export default class SessionRestoreErrorDialog extends React.Component {

src/components/views/dialogs/SetEmailDialog.js

@@ -22,8 +22,7 @@ import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Prompt the user to set an email address.
@@ -71,14 +70,14 @@ export default class SetEmailDialog extends React.Component {
                 onFinished: this.onEmailDialogFinished,
             });
         }, (err) => {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
             console.error("Unable to add email address " + emailAddress + " " + err);
             Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
                 title: _t("Unable to add email address"),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         });
-        this.setState({emailBusy: true});
+        this.setState({ emailBusy: true });
     };
 
     onCancelled = () => {
@@ -89,7 +88,7 @@ export default class SetEmailDialog extends React.Component {
         if (ok) {
             this.verifyEmailAddress();
         } else {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
         }
     };
 
@@ -97,7 +96,7 @@ export default class SetEmailDialog extends React.Component {
         this._addThreepid.checkEmailLinkClicked().then(() => {
             this.props.onFinished(true);
         }, (err) => {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 const message = _t("Unable to verify email address.") + " " +

src/components/views/dialogs/ShareDialog.tsx

@@ -17,24 +17,25 @@ limitations under the License.
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
-import {User} from "matrix-js-sdk/src/models/user";
-import {Group} from "matrix-js-sdk/src/models/group";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import * as sdk from '../../../index';
+import { Room } from "matrix-js-sdk/src/models/room";
+import { User } from "matrix-js-sdk/src/models/user";
+import { Group } from "matrix-js-sdk/src/models/group";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
 import QRCode from "../elements/QRCode";
-import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
-import {toRightOf} from "../../structures/ContextMenu";
-import {copyPlaintext, selectText} from "../../../utils/strings";
+import { toRightOf } from "../../structures/ContextMenu";
+import { copyPlaintext, selectText } from "../../../utils/strings";
 import StyledCheckbox from '../elements/StyledCheckbox';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
+import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 
 const socials = [
     {
@@ -119,8 +120,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
 
         const successful = await copyPlaintext(this.getUrl());
         const buttonRect = target.getBoundingClientRect();
-        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
-        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+        const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
@@ -230,7 +230,6 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             </>;
         }
 
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return <BaseDialog
             title={title}
             className='mx_ShareDialog'

src/components/views/dialogs/SlashCommandHelpDialog.js

@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
-import {CommandCategories, Commands} from "../../../SlashCommands";
+import { _t } from "../../../languageHandler";
+import { CommandCategories, Commands } from "../../../SlashCommands";
 import * as sdk from "../../../index";
 
-export default ({onFinished}) => {
+export default ({ onFinished }) => {
     const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
 
     const categories = {};
@@ -35,16 +35,16 @@ export default ({onFinished}) => {
         const rows = [
             <tr key={"_category_" + category} className="mx_SlashCommandHelpDialog_headerRow">
                 <td colSpan={3}>
-                    <h2>{_t(category)}</h2>
+                    <h2>{ _t(category) }</h2>
                 </td>
             </tr>,
         ];
 
         categories[category].forEach(cmd => {
             rows.push(<tr key={cmd.command}>
-                <td><strong>{cmd.getCommand()}</strong></td>
-                <td>{cmd.args}</td>
-                <td>{cmd.description}</td>
+                <td><strong>{ cmd.getCommand() }</strong></td>
+                <td>{ cmd.args }</td>
+                <td>{ cmd.description }</td>
             </tr>);
         });
 
@@ -56,7 +56,7 @@ export default ({onFinished}) => {
         title={_t("Command Help")}
         description={<table>
             <tbody>
-                {body}
+                { body }
             </tbody>
         </table>}
         hasCloseButton={true}

src/components/views/dialogs/SpaceSettingsDialog.tsx

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

src/components/views/dialogs/StorageEvictedDialog.js

@@ -20,7 +20,7 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.StorageEvictedDialog")
 export default class StorageEvictedDialog extends React.Component {
@@ -48,7 +48,7 @@ export default class StorageEvictedDialog extends React.Component {
                 "To help us prevent this in future, please <a>send us logs</a>.",
                 {},
                 {
-                    a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
+                    a: text => <a href="#" onClick={this._sendBugReport}>{ text }</a>,
                 },
             );
         }
@@ -60,15 +60,15 @@ export default class StorageEvictedDialog extends React.Component {
                 hasCancel={false}
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    <p>{_t(
+                    <p>{ _t(
                         "Some session data, including encrypted message keys, is " +
                         "missing. Sign out and sign in to fix this, restoring keys " +
                         "from backup.",
-                    )}</p>
-                    <p>{_t(
+                    ) }</p>
+                    <p>{ _t(
                         "Your browser likely removed this data when running low on " +
                         "disk space.",
-                    )} {logRequest}</p>
+                    ) } { logRequest }</p>
                 </div>
                 <DialogButtons primaryButton={_t("Sign out")}
                     onPrimaryButtonClick={this._onSignOutClick}

src/components/views/dialogs/TabbedIntegrationManagerDialog.js

@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
+import { Room } from "matrix-js-sdk/src/models/room";
 import * as sdk from '../../../index';
-import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
+import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms";
 import classNames from 'classnames';
 import * as ScalarMessaging from "../../../ScalarMessaging";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog")
 export default class TabbedIntegrationManagerDialog extends React.Component {
@@ -63,11 +63,11 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         };
     }
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.openManager(0, true);
     }
 
-    openManager = async (i: number, force = false) => {
+    openManager = async (i, force = false) => {
         if (i === this.state.currentIndex && !force) return;
 
         const manager = this.state.managers[i];
@@ -134,7 +134,7 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
                     key={`tab_${i}`}
                     disabled={this.state.busy}
                 >
-                    {m.name}
+                    { m.name }
                 </AccessibleButton>
             );
         });
@@ -163,10 +163,10 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         return (
             <div className='mx_TabbedIntegrationManagerDialog_container'>
                 <div className='mx_TabbedIntegrationManagerDialog_tabs'>
-                    {this._renderTabs()}
+                    { this._renderTabs() }
                 </div>
                 <div className='mx_TabbedIntegrationManagerDialog_currentManager'>
-                    {this._renderTab()}
+                    { this._renderTab() }
                 </div>
             </div>
         );

src/components/views/dialogs/TermsDialog.tsx

@@ -16,11 +16,12 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
+import DialogButtons from "../elements/DialogButtons";
+import BaseDialog from "./BaseDialog";
 
 interface ITermsCheckboxProps {
     onChange: (url: string, checked: boolean) => void;
@@ -31,7 +32,7 @@ interface ITermsCheckboxProps {
 class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
     private onChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
-    }
+    };
 
     render() {
         return <input type="checkbox"
@@ -46,19 +47,19 @@ interface ITermsDialogProps {
      * Array of [Service, policies] pairs, where policies is the response from the
      * /terms endpoint for that service
      */
-    policiesAndServicePairs: any[],
+    policiesAndServicePairs: any[];
 
     /**
      * urls that the user has already agreed to
      */
-    agreedUrls?: string[],
+    agreedUrls?: string[];
 
     /**
      * Called with:
      *     * success {bool} True if the user accepted any douments, false if cancelled
      *     * agreedUrls {string[]} List of agreed URLs
      */
-    onFinished: (success: boolean, agreedUrls?: string[]) => void,
+    onFinished: (success: boolean, agreedUrls?: string[]) => void;
 }
 
 interface IState {
@@ -80,18 +81,18 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
 
     private onCancelClick = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onNextClick = (): void => {
         this.props.onFinished(true, Object.keys(this.state.agreedUrls).filter((url) => this.state.agreedUrls[url]));
-    }
+    };
 
     private nameForServiceType(serviceType: SERVICE_TYPES, host: string): JSX.Element {
         switch (serviceType) {
             case SERVICE_TYPES.IS:
-                return <div>{_t("Identity Server")}<br />({host})</div>;
+                return <div>{ _t("Identity server") }<br />({ host })</div>;
             case SERVICE_TYPES.IM:
-                return <div>{_t("Integration Manager")}<br />({host})</div>;
+                return <div>{ _t("Integration manager") }<br />({ host })</div>;
         }
     }
 
@@ -99,13 +100,13 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         switch (serviceType) {
             case SERVICE_TYPES.IS:
                 return <div>
-                    {_t("Find others by phone or email")}
+                    { _t("Find others by phone or email") }
                     <br />
-                    {_t("Be found by phone or email")}
+                    { _t("Be found by phone or email") }
                 </div>;
             case SERVICE_TYPES.IM:
                 return <div>
-                    {_t("Use bots, bridges, widgets and sticker packs")}
+                    { _t("Use bots, bridges, widgets and sticker packs") }
                 </div>;
         }
     }
@@ -114,12 +115,9 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         this.setState({
             agreedUrls: Object.assign({}, this.state.agreedUrls, { [url]: checked }),
         });
-    }
+    };
 
     public render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         const rows = [];
         for (const policiesAndService of this.props.policiesAndServicePairs) {
             const parsedBaseUrl = url.parse(policiesAndService.service.baseUrl);
@@ -138,10 +136,10 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
                 }
 
                 rows.push(<tr key={termDoc[termsLang].url}>
-                    <td className="mx_TermsDialog_service">{serviceName}</td>
-                    <td className="mx_TermsDialog_summary">{summary}</td>
+                    <td className="mx_TermsDialog_service">{ serviceName }</td>
+                    <td className="mx_TermsDialog_summary">{ summary }</td>
                     <td>
-                        {termDoc[termsLang].name}
+                        { termDoc[termsLang].name }
                         <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
                             <span className="mx_TermsDialog_link" />
                         </a>
@@ -188,16 +186,16 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
                 hasCancel={false}
             >
                 <div id='mx_Dialog_content'>
-                    <p>{_t("To continue you need to accept the terms of this service.")}</p>
+                    <p>{ _t("To continue you need to accept the terms of this service.") }</p>
 
                     <table className="mx_TermsDialog_termsTable"><tbody>
                         <tr className="mx_TermsDialog_termsTableHeader">
-                            <th>{_t("Service")}</th>
-                            <th>{_t("Summary")}</th>
-                            <th>{_t("Document")}</th>
-                            <th>{_t("Accept")}</th>
+                            <th>{ _t("Service") }</th>
+                            <th>{ _t("Summary") }</th>
+                            <th>{ _t("Document") }</th>
+                            <th>{ _t("Accept") }</th>
                         </tr>
-                        {rows}
+                        { rows }
                     </tbody></table>
                 </div>
 

src/components/views/dialogs/TextInputDialog.js

@@ -14,12 +14,12 @@ 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 * as sdk from '../../../index';
 import Field from "../elements/Field";
 import { _t, _td } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.TextInputDialog")
 export default class TextInputDialog extends React.Component {

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -30,7 +30,7 @@ interface IProps extends IDialogProps {
     device: IDevice;
 }
 
-const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
+const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) => {
     let askToVerifyText;
     let newSessionText;
 
@@ -39,7 +39,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) =>
         askToVerifyText = _t("Verify your other session using one of the options below.");
     } else {
         newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
-            {name: user.displayName, userId: user.userId});
+            { name: user.displayName, userId: user.userId });
         askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
     }
 
@@ -48,13 +48,13 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) =>
         className="mx_UntrustedDeviceDialog"
         title={<>
             <E2EIcon status="warning" size={24} hideTooltip={true} />
-            { _t("Not Trusted")}
+            { _t("Not Trusted") }
         </>}
     >
         <div className="mx_Dialog_content" id='mx_Dialog_content'>
-            <p>{newSessionText}</p>
-            <p>{device.getDisplayName()} ({device.deviceId})</p>
-            <p>{askToVerifyText}</p>
+            <p>{ newSessionText }</p>
+            <p>{ device.getDisplayName() } ({ device.deviceId })</p>
+            <p>{ askToVerifyText }</p>
         </div>
         <div className='mx_Dialog_buttons'>
             <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -16,11 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import filesize from "filesize";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getBlobSafeMimeType } from '../../../utils/blobs';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
     file: File;
@@ -36,7 +37,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     static defaultProps = {
         totalFiles: 1,
-    }
+    };
 
     constructor(props) {
         super(props);
@@ -56,20 +57,17 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     private onCancelClick = () => {
         this.props.onFinished(false);
-    }
+    };
 
     private onUploadClick = () => {
         this.props.onFinished(true);
-    }
+    };
 
     private onUploadAllClick = () => {
         this.props.onFinished(true, true);
-    }
+    };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         let title;
         if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
             title = _t(
@@ -88,7 +86,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
             preview = <div className="mx_UploadConfirmDialog_previewOuter">
                 <div className="mx_UploadConfirmDialog_previewInner">
                     <div><img className="mx_UploadConfirmDialog_imagePreview" src={this.objectUrl} /></div>
-                    <div>{this.props.file.name} ({filesize(this.props.file.size)})</div>
+                    <div>{ this.props.file.name } ({ filesize(this.props.file.size) })</div>
                 </div>
             </div>;
         } else {
@@ -97,7 +95,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
                     <img className="mx_UploadConfirmDialog_fileIcon"
                         src={require("../../../../res/img/feather-customised/files.svg")}
                     />
-                    {this.props.file.name} ({filesize(this.props.file.size)})
+                    { this.props.file.name } ({ filesize(this.props.file.size) })
                 </div>
             </div>;
         }
@@ -105,7 +103,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
         let uploadAllButton;
         if (this.props.currentIndex + 1 < this.props.totalFiles) {
             uploadAllButton = <button onClick={this.onUploadAllClick}>
-                {_t("Upload all")}
+                { _t("Upload all") }
             </button>;
         }
 
@@ -117,7 +115,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
                 contentId='mx_Dialog_content'
             >
                 <div id='mx_Dialog_content'>
-                    {preview}
+                    { preview }
                 </div>
 
                 <DialogButtons primaryButton={_t('Upload')}
@@ -125,7 +123,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
                     onPrimaryButtonClick={this.onUploadClick}
                     focus={true}
                 >
-                    {uploadAllButton}
+                    { uploadAllButton }
                 </DialogButtons>
             </BaseDialog>
         );

src/components/views/dialogs/UploadFailureDialog.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Tells the user about files we know cannot be uploaded before we even try uploading
@@ -60,7 +60,7 @@ export default class UploadFailureDialog extends React.Component {
                     limit: filesize(this.props.contentMessages.getUploadLimit()),
                     sizeOfThisFile: filesize(this.props.badFiles[0].size),
                 }, {
-                    b: sub => <b>{sub}</b>,
+                    b: sub => <b>{ sub }</b>,
                 },
             );
             buttons = <DialogButtons primaryButton={_t('OK')}
@@ -75,7 +75,7 @@ export default class UploadFailureDialog extends React.Component {
                 {
                     limit: filesize(this.props.contentMessages.getUploadLimit()),
                 }, {
-                    b: sub => <b>{sub}</b>,
+                    b: sub => <b>{ sub }</b>,
                 },
             );
             buttons = <DialogButtons primaryButton={_t('OK')}
@@ -90,7 +90,7 @@ export default class UploadFailureDialog extends React.Component {
                 {
                     limit: filesize(this.props.contentMessages.getUploadLimit()),
                 }, {
-                    b: sub => <b>{sub}</b>,
+                    b: sub => <b>{ sub }</b>,
                 },
             );
             const howManyOthers = this.props.totalFiles - this.props.badFiles.length;
@@ -111,11 +111,11 @@ export default class UploadFailureDialog extends React.Component {
                 contentId='mx_Dialog_content'
             >
                 <div id='mx_Dialog_content'>
-                    {message}
-                    {preview}
+                    { message }
+                    { preview }
                 </div>
 
-                {buttons}
+                { buttons }
             </BaseDialog>
         );
     }

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import TabbedView, {Tab} from "../../structures/TabbedView";
-import {_t, _td} from "../../../languageHandler";
+import TabbedView, { Tab } from "../../structures/TabbedView";
+import { _t, _td } from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore, { CallbackFn } from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
@@ -28,11 +28,11 @@ import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSet
 import VoiceUserSettingsTab from "../settings/tabs/user/VoiceUserSettingsTab";
 import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
 import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
-import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseDialog from "./BaseDialog";
 
 export enum UserTab {
     General = "USER_GENERAL_TAB",
@@ -78,10 +78,10 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
 
     private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
         // We can cheat because we know what levels a feature is tracked at, and how it is tracked
-        this.setState({mjolnirEnabled: newValue});
-    }
+        this.setState({ mjolnirEnabled: newValue });
+    };
 
-    _getTabs() {
+    private getTabs() {
         const tabs = [];
 
         tabs.push(new Tab(
@@ -162,8 +162,6 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
     }
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
         return (
             <BaseDialog
                 className='mx_UserSettingsDialog'
@@ -172,7 +170,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
                 title={_t("Settings")}
             >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
+                    <TabbedView tabs={this.getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
             </BaseDialog>
         );