Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete

Conflicts: src/autocomplete/AutocompleteProvider.tsx src/components/views/rooms/Autocomplete.tsx
2021-05-18 12:49:11 +01:00 · 2021-05-18 12:49:11 +01:00 · e9c258a930
commit e9c258a930
parent 60e7089c77 367ad1583d
118 changed files with 3100 additions and 1003 deletions
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@ -179,7 +179,7 @@ const BaseAvatar = (props: IProps) => {
                    width: toPx(width),
                    height: toPx(height),
                }}
-                title={title} alt=""
+                title={title} alt={_t("Avatar")}
                inputRef={inputRef}
                {...otherProps} />
        );
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@ -20,7 +20,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { User } from "matrix-js-sdk/src/models/user";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";

-import { TagID } from '../../../stores/room-list/models';
 import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from '../rooms/NotificationBadge';
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
@ -35,7 +34,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 interface IProps {
    room: Room;
    avatarSize: number;
-    tag: TagID;
    displayBadge?: boolean;
    forceCount?: boolean;
    oobData?: object;
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@ -0,0 +1,108 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import SettingsStore from "../../../settings/SettingsStore";
+import {SettingLevel} from "../../../settings/SettingLevel";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import Modal from "../../../Modal";
+import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../../SdkConfig";
+
+interface IProps {
+    title?: string;
+    featureId: string;
+}
+
+export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
+    if (onClick) {
+        return <TextWithTooltip
+            class={classNames("mx_BetaCard_betaPill", {
+                mx_BetaCard_betaPill_clickable: !!onClick,
+            })}
+            tooltip={<div>
+                <div className="mx_Tooltip_title">
+                    { _t("Spaces is a beta feature") }
+                </div>
+                <div className="mx_Tooltip_sub">
+                    { _t("Tap for more info") }
+                </div>
+            </div>}
+            onClick={onClick}
+            tooltipProps={{ yOffset: -10 }}
+        >
+            { _t("Beta") }
+        </TextWithTooltip>;
+    }
+
+    return <span
+        className={classNames("mx_BetaCard_betaPill", {
+            mx_BetaCard_betaPill_clickable: !!onClick,
+        })}
+        onClick={onClick}
+    >
+        { _t("Beta") }
+    </span>;
+};
+
+const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
+    const info = SettingsStore.getBetaInfo(featureId);
+    if (!info) return null; // Beta is invalid/disabled
+
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading } = info;
+    const value = SettingsStore.getValue(featureId);
+
+    let feedbackButton;
+    if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
+        feedbackButton = <AccessibleButton
+            onClick={() => {
+                Modal.createTrackedDialog("Beta Feedback", featureId, BetaFeedbackDialog, { featureId });
+            }}
+            kind="primary"
+        >
+            { _t("Feedback") }
+        </AccessibleButton>;
+    }
+
+    return <div className="mx_BetaCard">
+        <div>
+            <h3 className="mx_BetaCard_title">
+                { titleOverride || _t(title) }
+                <BetaPill />
+            </h3>
+            <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+            <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>
+            </div>
+            { disclaimer && <div className="mx_BetaCard_disclaimer">
+                { disclaimer(value) }
+            </div> }
+        </div>
+        <img src={image} alt="" />
+    </div>;
+};
+
+export default BetaCard;
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {useContext, useMemo, useState} from "react";
+import React, {ReactNode, useContext, useMemo, useState} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
@ -36,6 +36,8 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";

 interface IProps extends IDialogProps {
    matrixClient: MatrixClient;
@ -45,7 +47,10 @@ interface IProps extends IDialogProps {

 const Entry = ({ room, checked, onChange }) => {
    return <label className="mx_AddExistingToSpace_entry">
-        <RoomAvatar room={room} height={32} width={32} />
+        { room?.isSpaceRoom()
+            ? <RoomAvatar room={room} height={32} width={32} />
+            : <DecoratedRoomAvatar room={room} avatarSize={32} />
+        }
        <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
        <StyledCheckbox
            onChange={onChange ? (e) => onChange(e.target.checked) : null}
@ -57,14 +62,23 @@ const Entry = ({ room, checked, onChange }) => {

 interface IAddExistingToSpaceProps {
    space: Room;
-    selected: Set<Room>;
-    onChange(checked: boolean, room: Room): void;
+    footerPrompt?: ReactNode;
+    emptySelectionButton?: ReactNode;
+    onFinished(added: boolean): void;
 }

-export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
+    space,
+    footerPrompt,
+    emptySelectionButton,
+    onFinished,
+}) => {
    const cli = useContext(MatrixClientContext);
    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);

+    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
+    const [progress, setProgress] = useState<number>(null);
+    const [error, setError] = useState<Error>(null);
    const [query, setQuery] = useState("");
    const lcQuery = query.toLowerCase();

@ -92,116 +106,6 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space,
        return arr;
    }, [[], [], []]);

-    return <div className="mx_AddExistingToSpace">
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
-            onSearch={setQuery}
-            autoComplete={true}
-            autoFocus={true}
-        />
-        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : undefined }
-
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selected.has(space)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, space);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { dms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Direct Messages") }</h3>
-                    { dms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selected.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
-            ) : null }
-
-            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
-    </div>;
-};
-
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
-    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
-    const [progress, setProgress] = useState<number>(null);
-    const [error, setError] = useState<Error>(null);
-
-    let spaceOptionSection;
-    if (existingSubspaces.length > 0) {
-        const options = [space, ...existingSubspaces].map((space) => {
-            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
-                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
-            });
-            return <div key={space.roomId} className={classes}>
-                <RoomAvatar room={space} width={24} height={24} />
-                { space.name || getDisplayAliasForRoom(space) || space.roomId }
-            </div>;
-        });
-
-        spaceOptionSection = (
-            <Dropdown
-                id="mx_SpaceSelectDropdown"
-                onOptionChange={(key: string) => {
-                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
-                }}
-                value={selectedSpace.roomId}
-                label={_t("Space selection")}
-            >
-                { options }
-            </Dropdown>
-        );
-    } else {
-        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
-            { space.name || getDisplayAliasForRoom(space) || space.roomId }
-        </div>;
-    }
-
-    const title = <React.Fragment>
-        <RoomAvatar room={selectedSpace} height={40} width={40} />
-        <div>
-            <h1>{ _t("Add existing rooms") }</h1>
-            { spaceOptionSection }
-        </div>
-    </React.Fragment>;
-
    const addRooms = async () => {
        setError(null);
        setProgress(0);
@ -264,20 +168,145 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
            </div>
        </span>;
    } else {
+        let button = emptySelectionButton;
+        if (!button || selectedToAdd.size > 0) {
+            button = <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
+            </AccessibleButton>;
+        }
+
        footer = <>
            <span>
-                <div>{ _t("Want to add a new room instead?") }</div>
-                <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
-                    { _t("Create a new room") }
-                </AccessibleButton>
+                { footerPrompt }
            </span>

-            <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
-                { _t("Add") }
-            </AccessibleButton>
+            { button }
        </>;
    }

+    const onChange = !busy && !error ? (checked, room) => {
+        if (checked) {
+            selectedToAdd.add(room);
+        } else {
+            selectedToAdd.delete(room);
+        }
+        setSelectedToAdd(new Set(selectedToAdd));
+    } : null;
+
+    return <div className="mx_AddExistingToSpace">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    { rooms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    <div className="mx_AddExistingToSpace_section_experimental">
+                        <div>{ _t("Feeling experimental?") }</div>
+                        <div>{ _t("You can add existing spaces to a space.") }</div>
+                    </div>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selectedToAdd.has(space)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selectedToAdd.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+
+        <div className="mx_AddExistingToSpace_footer">
+            { footer }
+        </div>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+
+    let spaceOptionSection;
+    if (existingSubspaces.length > 0) {
+        const options = [space, ...existingSubspaces].map((space) => {
+            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
+                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
+            });
+            return <div key={space.roomId} className={classes}>
+                <RoomAvatar room={space} width={24} height={24} />
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>;
+        });
+
+        spaceOptionSection = (
+            <Dropdown
+                id="mx_SpaceSelectDropdown"
+                onOptionChange={(key: string) => {
+                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                }}
+                value={selectedSpace.roomId}
+                label={_t("Space selection")}
+            >
+                { options }
+            </Dropdown>
+        );
+    } else {
+        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
+            { space.name || getDisplayAliasForRoom(space) || space.roomId }
+        </div>;
+    }
+
+    const title = <React.Fragment>
+        <RoomAvatar room={selectedSpace} height={40} width={40} />
+        <div>
+            <h1>{ _t("Add existing rooms") }</h1>
+            { spaceOptionSection }
+        </div>
+    </React.Fragment>;
+
    return <BaseDialog
        title={title}
        className="mx_AddExistingToSpaceDialog"
@ -288,21 +317,17 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
        <MatrixClientContext.Provider value={cli}>
            <AddExistingToSpace
                space={space}
-                selected={selectedToAdd}
-                onChange={!busy && !error ? (checked, room) => {
-                    if (checked) {
-                        selectedToAdd.add(room);
-                    } else {
-                        selectedToAdd.delete(room);
-                    }
-                    setSelectedToAdd(new Set(selectedToAdd));
-                } : null}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new room instead?") }</div>
+                    <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                        { _t("Create a new room") }
+                    </AccessibleButton>
+                </>}
            />
        </MatrixClientContext.Provider>

-        <div className="mx_AddExistingToSpaceDialog_footer">
-            { footer }
-        </div>
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
    </BaseDialog>;
 };

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

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -16,7 +16,7 @@ limitations under the License.

 import * as React from 'react';
 import BaseDialog from './BaseDialog';
-import { _t } from '../../../languageHandler';
+import { _t, getUserLanguage } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import {
    ClientWidgetApi,
@ -39,6 +39,8 @@ import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ELEMENT_CLIENT_ID} from "../../../identifiers";
+import SettingsStore from "../../../settings/SettingsStore";

 interface IProps {
    widgetDefinition: IModalWidgetOpenRequestData;
@ -129,6 +131,9 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
            currentUserId: MatrixClientPeg.get().getUserId(),
            userDisplayName: OwnProfileStore.instance.displayName,
            userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
+            clientId: ELEMENT_CLIENT_ID,
+            clientTheme: SettingsStore.getValue("theme"),
+            clientLanguage: getUserLanguage(),
        });

        const parsed = new URL(templated);
--- a/src/components/views/dialogs/ServerPickerDialog.tsx
+++ b/src/components/views/dialogs/ServerPickerDialog.tsx
@ -217,6 +217,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                        value={this.state.otherHomeserver}
                        validateOnChange={false}
                        validateOnFocus={false}
+                        id="mx_homeserverInput"
                    />
                </StyledRadioButton>
                <p>
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@ -32,6 +32,7 @@ import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {allSettled} from "../../../utils/promise";
 import {useDispatcher} from "../../../hooks/useDispatcher";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";

 interface IProps extends IDialogProps {
    matrixClient: MatrixClient;
@ -111,15 +112,17 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin

            { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }

+            <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
+
            <SpaceBasicSettings
                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
-                avatarDisabled={!canSetAvatar}
+                avatarDisabled={busy || !canSetAvatar}
                setAvatar={setNewAvatar}
                name={name}
-                nameDisabled={!canSetName}
+                nameDisabled={busy || !canSetName}
                setName={setName}
                topic={topic}
-                topicDisabled={!canSetTopic}
+                topicDisabled={busy || !canSetTopic}
                setTopic={setTopic}
            />

--- a/src/components/views/dialogs/UntrustedDeviceDialog.tsx
+++ b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
@ -0,0 +1,73 @@
+/*
+Copyright 2019, 2020, 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { User } from "matrix-js-sdk/src/models/user";
+
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import E2EIcon from "../rooms/E2EIcon";
+import AccessibleButton from "../elements/AccessibleButton";
+import BaseDialog from "./BaseDialog";
+import { IDialogProps } from "./IDialogProps";
+import { IDevice } from "../right_panel/UserInfo";
+
+interface IProps extends IDialogProps {
+    user: User;
+    device: IDevice;
+}
+
+const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
+    let askToVerifyText;
+    let newSessionText;
+
+    if (MatrixClientPeg.get().getUserId() === user.userId) {
+        newSessionText = _t("You signed in to a new session without verifying it:");
+        askToVerifyText = _t("Verify your other session using one of the options below.");
+    } else {
+        newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
+            {name: user.displayName, userId: user.userId});
+        askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
+    }
+
+    return <BaseDialog
+        onFinished={onFinished}
+        className="mx_UntrustedDeviceDialog"
+        title={<>
+            <E2EIcon status="warning" size={24} hideTooltip={true} />
+            { _t("Not Trusted")}
+        </>}
+    >
+        <div className="mx_Dialog_content" id='mx_Dialog_content'>
+            <p>{newSessionText}</p>
+            <p>{device.getDisplayName()} ({device.deviceId})</p>
+            <p>{askToVerifyText}</p>
+        </div>
+        <div className='mx_Dialog_buttons'>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("legacy")}>
+                { _t("Manually Verify by Text") }
+            </AccessibleButton>
+            <AccessibleButton element="button" kind="secondary" onClick={() => onFinished("sas")}>
+                { _t("Interactively verify by Emoji") }
+            </AccessibleButton>
+            <AccessibleButton kind="primary" onClick={() => onFinished(false)}>
+                { _t("Done") }
+            </AccessibleButton>
+        </div>
+    </BaseDialog>;
+};
+
+export default UntrustedDeviceDialog;
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@ -125,7 +125,10 @@ export default class UserSettingsDialog extends React.Component {
            "mx_UserSettingsDialog_securityIcon",
            <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
        ));
-        if (SdkConfig.get()['showLabsSettings']) {
+        // Show the Labs tab if enabled or if there are any active betas
+        if (SdkConfig.get()['showLabsSettings']
+            || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))
+        ) {
            tabs.push(new Tab(
                USER_LABS_TAB,
                _td("Labs"),
--- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
+++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
@ -345,6 +345,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
                    <input
                        type="password"
+                        id="mx_passPhraseInput"
                        className="mx_AccessSecretStorageDialog_passPhraseInput"
                        onChange={this.onPassPhraseChange}
                        value={this.state.passPhrase}
--- a/src/components/views/directory/NetworkDropdown.js
+++ b/src/components/views/directory/NetworkDropdown.js
@ -49,6 +49,18 @@ const inPlaceOf = (elementRect) => ({
 });

 const validServer = withValidation({
+    deriveData: async ({ value }) => {
+        try {
+            // check if we can successfully load this server's room directory
+            await MatrixClientPeg.get().publicRooms({
+                limit: 1,
+                server: value,
+            });
+            return {};
+        } catch (error) {
+            return { error };
+        }
+    },
    rules: [
        {
            key: "required",
@ -57,21 +69,11 @@ const validServer = withValidation({
        }, {
            key: "available",
            final: true,
-            test: async ({ value }) => {
-                try {
-                    const opts = {
-                        limit: 1,
-                        server: value,
-                    };
-                    // check if we can successfully load this server's room directory
-                    await MatrixClientPeg.get().publicRooms(opts);
-                    return true;
-                } catch (e) {
-                    return false;
-                }
-            },
+            test: async (_, { error }) => !error,
            valid: () => _t("Looks good"),
-            invalid: () => _t("Can't find this server or its room list"),
+            invalid: ({ error }) => error.errcode === "M_FORBIDDEN"
+                ? _t("You are not allowed to view this server's rooms list")
+                : _t("Can't find this server or its room list"),
        },
    ],
 });
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@ -32,6 +32,7 @@ export default class ActionButton extends React.Component {
        label: PropTypes.string.isRequired,
        iconPath: PropTypes.string,
        className: PropTypes.string,
+        children: PropTypes.node,
    };

    static defaultProps = {
@ -79,7 +80,8 @@ export default class ActionButton extends React.Component {
        }

        return (
-            <AccessibleButton className={classNames.join(" ")}
+            <AccessibleButton
+                className={classNames.join(" ")}
                onClick={this._onClick}
                onMouseEnter={this._onMouseEnter}
                onMouseLeave={this._onMouseLeave}
@ -87,6 +89,7 @@ export default class ActionButton extends React.Component {
            >
                { icon }
                { tooltip }
+                { this.props.children }
            </AccessibleButton>
        );
    }
--- a/src/components/views/elements/EffectsOverlay.tsx
+++ b/src/components/views/elements/EffectsOverlay.tsx
@ -37,7 +37,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                effect = new Effect(options);
                effectsRef.current[name] = effect;
            } catch (err) {
-                console.warn('Unable to load effect module at \'../../../effects/${name}\'.', err);
+                console.warn(`Unable to load effect module at '../../../effects/${name}.`, err);
            }
        }
        return effect;
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@ -207,6 +207,7 @@ export default class ImageView extends React.Component<IProps, IState> {
        a.href = this.props.src;
        a.download = this.props.name;
        a.target = "_blank";
+        a.rel = "noreferrer noopener";
        a.click();
    };

@ -442,16 +443,16 @@ export default class ImageView extends React.Component<IProps, IState> {
                <div className="mx_ImageView_panel">
                    {info}
                    <div className="mx_ImageView_toolbar">
-                        <AccessibleTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                            title={_t("Rotate Right")}
-                            onClick={this.onRotateClockwiseClick}>
-                        </AccessibleTooltipButton>
                        <AccessibleTooltipButton
                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                            title={_t("Rotate Left")}
                            onClick={ this.onRotateCounterClockwiseClick }>
                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
                        {zoomOutButton}
                        {zoomInButton}
                        <AccessibleTooltipButton
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.js
@ -58,13 +58,8 @@ export default class LanguageDropdown extends React.Component {
            // If no value is given, we start with the first
            // country selected, but our parent component
            // doesn't know this, therefore we do this.
-            const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
-            if (language) {
-                this.props.onOptionChange(language);
-            } else {
-                const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
-                this.props.onOptionChange(language);
-            }
+            const language = languageHandler.getUserLanguage();
+            this.props.onOptionChange(language);
        }
    }

--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,29 +14,72 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import classNames from "classnames";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";

-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { aboveLeftOf, ContextMenu, useContextMenu } from "../../structures/ContextMenu";
+import ReactionPicker from "../emojipicker/ReactionPicker";
+import ReactionsRowButton from "./ReactionsRowButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";

 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;

-@replaceableComponent("views.messages.ReactionsRow")
-export default class ReactionsRow extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
+const ReactButton = ({ mxEvent, reactions }: IProps) => {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
+            <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
+        </ContextMenu>;
    }

-    constructor(props) {
-        super(props);
+    return <React.Fragment>
+        <ContextMenuTooltipButton
+            className={classNames("mx_ReactionsRow_addReactionButton", {
+                mx_ReactionsRow_addReactionButton_active: menuDisplayed,
+            })}
+            title={_t("Add reaction")}
+            onClick={openMenu}
+            onContextMenu={e => {
+                e.preventDefault();
+                openMenu();
+            }}
+            isExpanded={menuDisplayed}
+            inputRef={button}
+        />
+
+        { contextMenu }
+    </React.Fragment>;
+};
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions?: Relations;
+}
+
+interface IState {
+    myReactions: MatrixEvent[];
+    showAll: boolean;
+}
+
+@replaceableComponent("views.messages.ReactionsRow")
+export default class ReactionsRow extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;
+
+    constructor(props, context) {
+        super(props, context);

        if (props.reactions) {
            props.reactions.on("Relations.add", this.onReactionsChange);
@ -92,7 +135,7 @@ export default class ReactionsRow extends React.PureComponent {
        if (!reactions) {
            return null;
        }
-        const userId = MatrixClientPeg.get().getUserId();
+        const userId = this.context.getUserId();
        const myReactions = reactions.getAnnotationsBySender()[userId];
        if (!myReactions) {
            return null;
@ -114,7 +157,6 @@ export default class ReactionsRow extends React.PureComponent {
            return null;
        }

-        const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
        let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
            const count = events.size;
            if (!count) {
@ -136,6 +178,8 @@ export default class ReactionsRow extends React.PureComponent {
            />;
        }).filter(item => !!item);

+        if (!items.length) return null;
+
        // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
        // The "+ 1" ensure that the "show all" reveals something that takes up
        // more space than the button itself.
@ -151,13 +195,21 @@ export default class ReactionsRow extends React.PureComponent {
            </a>;
        }

+        const cli = this.context;
+
+        let addReactionButton;
+        if (cli.getRoom(mxEvent.getRoomId()).currentState.maySendEvent(EventType.Reaction, cli.getUserId())) {
+            addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
+        }
+
        return <div
            className="mx_ReactionsRow"
            role="toolbar"
            aria-label={_t("Reactions")}
        >
-            {items}
-            {showAllButton}
+            { items }
+            { showAllButton }
+            { addReactionButton }
        </div>;
    }
 }
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,49 +14,54 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from "react";
+import classNames from "classnames";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";

-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import dis from "../../../dispatcher/dispatcher";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The reaction content / key / emoji
+    content: string;
+    // The count of votes for this key
+    count: number;
+    // A Set of Matrix reaction events for this key
+    reactionEvents: Set<MatrixEvent>;
+    // A possible Matrix event if the current user has voted for this type
+    myReactionEvent?: MatrixEvent;
+}
+
+interface IState {
+    tooltipRendered: boolean;
+    tooltipVisible: boolean;
+}

@replaceableComponent("views.messages.ReactionsRowButton")
-export default class ReactionsRowButton extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The reaction content / key / emoji
-        content: PropTypes.string.isRequired,
-        // The count of votes for this key
-        count: PropTypes.number.isRequired,
-        // A Set of Martix reaction events for this key
-        reactionEvents: PropTypes.object.isRequired,
-        // A possible Matrix event if the current user has voted for this type
-        myReactionEvent: PropTypes.object,
-    }
+export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;

-    constructor(props) {
-        super(props);
+    state = {
+        tooltipRendered: false,
+        tooltipVisible: false,
+    };

-        this.state = {
-            tooltipVisible: false,
-        };
-    }
-
-    onClick = (ev) => {
+    onClick = () => {
        const { mxEvent, myReactionEvent, content } = this.props;
        if (myReactionEvent) {
-            MatrixClientPeg.get().redactEvent(
+            this.context.redactEvent(
                mxEvent.getRoomId(),
                myReactionEvent.getId(),
            );
        } else {
-            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
+            this.context.sendEvent(mxEvent.getRoomId(), "m.reaction", {
                "m.relates_to": {
                    "rel_type": "m.annotation",
                    "event_id": mxEvent.getId(),
@ -83,8 +88,6 @@ export default class ReactionsRowButton extends React.PureComponent {
    }

    render() {
-        const ReactionsRowButtonTooltip =
-            sdk.getComponent('messages.ReactionsRowButtonTooltip');
        const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;

        const classes = classNames({
@ -102,7 +105,7 @@ export default class ReactionsRowButton extends React.PureComponent {
            />;
        }

-        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        const room = this.context.getRoom(mxEvent.getRoomId());
        let label;
        if (room) {
            const senders = [];
@ -130,7 +133,6 @@ export default class ReactionsRowButton extends React.PureComponent {
            );
        }
        const isPeeking = room.getMyMembership() !== "join";
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
        return <AccessibleButton
            className={classes}
            aria-label={label}
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,33 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";

-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { unicodeToShortcode } from '../../../HtmlUtils';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "../elements/Tooltip";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The reaction content / key / emoji
+    content: string;
+    // A Set of Matrix reaction events for this key
+    reactionEvents: Set<MatrixEvent>;
+    visible: boolean;
+}

@replaceableComponent("views.messages.ReactionsRowButtonTooltip")
-export default class ReactionsRowButtonTooltip extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The reaction content / key / emoji
-        content: PropTypes.string.isRequired,
-        // A Set of Martix reaction events for this key
-        reactionEvents: PropTypes.object.isRequired,
-        visible: PropTypes.bool.isRequired,
-    }
+export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
+    static contextType = MatrixClientContext;

    render() {
-        const Tooltip = sdk.getComponent('elements.Tooltip');
        const { content, reactionEvents, mxEvent, visible } = this.props;

-        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        const room = this.context.getRoom(mxEvent.getRoomId());
        let tooltipLabel;
        if (room) {
            const senders = [];
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -67,7 +67,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {mediaFromMxc} from "../../../customisations/Media";

-interface IDevice {
+export interface IDevice {
    deviceId: string;
    ambiguous?: boolean;
    getDisplayName(): string;
--- a/src/components/views/rooms/Autocomplete.tsx
+++ b/src/components/views/rooms/Autocomplete.tsx
@ -25,6 +25,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 import Autocompleter from '../../../autocomplete/Autocompleter';
 import {replaceableComponent} from "../../../utils/replaceableComponent";

+const MAX_PROVIDER_MATCHES = 20;
+
 export const generateCompletionDomId = (number) => `mx_Autocomplete_Completion_${number}`;

 interface IProps {
@ -134,7 +136,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {

    processQuery(query: string, selection: ISelectionRange) {
        return this.autocompleter.getCompletions(
-            query, selection, this.state.forceComplete,
+            query, selection, this.state.forceComplete, MAX_PROVIDER_MATCHES,
        ).then((completions) => {
            // Only ever process the completions for the most recent query being processed
            if (query !== this.queryRequested) {
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@ -35,6 +35,7 @@ import {Action} from "../../../dispatcher/actions";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {getKeyBindingsManager, MessageComposerAction} from '../../../KeyBindingsManager';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SendHistoryManager from '../../../SendHistoryManager';
 import Modal from '../../../Modal';

 function _isReply(mxEvent) {
@ -122,6 +123,7 @@ export default class EditMessageComposer extends React.Component {
            saveDisabled: true,
        };
        this._createEditorModel();
+        window.addEventListener("beforeunload", this._saveStoredEditorState);
    }

    _setEditorRef = ref => {
@ -175,11 +177,55 @@ export default class EditMessageComposer extends React.Component {
        }
    }

+    get _editorRoomKey() {
+        return `mx_edit_room_${this._getRoom().roomId}`;
+    }
+
+    get _editorStateKey() {
+        return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
+    }
+
    _cancelEdit = () => {
+        this._clearStoredEditorState();
        dis.dispatch({action: "edit_event", event: null});
        dis.fire(Action.FocusComposer);
    }

+    get _shouldSaveStoredEditorState() {
+        return localStorage.getItem(this._editorRoomKey) !== null;
+    }
+
+    _restoreStoredEditorState(partCreator) {
+        const json = localStorage.getItem(this._editorStateKey);
+        if (json) {
+            try {
+                const {parts: serializedParts} = JSON.parse(json);
+                const parts = serializedParts.map(p => partCreator.deserializePart(p));
+                return parts;
+            } catch (e) {
+                console.error("Error parsing editing state: ", e);
+            }
+        }
+    }
+
+    _clearStoredEditorState() {
+        localStorage.removeItem(this._editorRoomKey);
+        localStorage.removeItem(this._editorStateKey);
+    }
+
+    _clearPreviousEdit() {
+        if (localStorage.getItem(this._editorRoomKey)) {
+            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this._editorRoomKey)}`);
+        }
+    }
+
+    _saveStoredEditorState() {
+        const item = SendHistoryManager.createItem(this.model);
+        this._clearPreviousEdit();
+        localStorage.setItem(this._editorRoomKey, this.props.editState.getEvent().getId());
+        localStorage.setItem(this._editorStateKey, JSON.stringify(item));
+    }
+
    _isSlashCommand() {
        const parts = this.model.parts;
        const firstPart = parts[0];
@ -266,6 +312,7 @@ export default class EditMessageComposer extends React.Component {
        const editedEvent = this.props.editState.getEvent();
        const editContent = createEditContent(this.model, editedEvent);
        const newContent = editContent["m.new_content"];
+
        let shouldSend = true;

        // If content is modified then send an updated event into the room
@ -311,6 +358,7 @@ export default class EditMessageComposer extends React.Component {
            if (shouldSend) {
                this._cancelPreviousPendingEdit();
                const prom = this.context.sendMessage(roomId, editContent);
+                this._clearStoredEditorState();
                dis.dispatch({action: "message_sent"});
                CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
            }
@ -346,6 +394,10 @@ export default class EditMessageComposer extends React.Component {
        // then when mounting the editor again with the same editor state,
        // it will set the cursor at the end.
        this.props.editState.setEditorState(caret, parts);
+        window.removeEventListener("beforeunload", this._saveStoredEditorState);
+        if (this._shouldSaveStoredEditorState) {
+            this._saveStoredEditorState();
+        }
    }

    _createEditorModel() {
@ -358,10 +410,11 @@ export default class EditMessageComposer extends React.Component {
            // restore serialized parts from the state
            parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p));
        } else {
-            // otherwise, parse the body of the event
-            parts = parseEvent(editState.getEvent(), partCreator);
+            //otherwise, either restore serialized parts from localStorage or parse the body of the event
+            parts = this._restoreStoredEditorState(partCreator) || parseEvent(editState.getEvent(), partCreator);
        }
        this.model = new EditorModel(parts, partCreator);
+        this._saveStoredEditorState();
    }

    _getInitialCaretPosition() {
--- a/src/components/views/rooms/RoomBreadcrumbs.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs.tsx
@ -23,11 +23,9 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import Analytics from "../../../Analytics";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { CSSTransition } from "react-transition-group";
-import RoomListStore from "../../../stores/room-list/RoomListStore";
-import { DefaultTagID } from "../../../stores/room-list/models";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";

 interface IProps {
 }
@ -84,8 +82,6 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>

    public render(): React.ReactElement {
        const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => {
-            const roomTags = RoomListStore.instance.getTagsForRoom(r);
-            const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
            return (
                <RovingAccessibleTooltipButton
                    className="mx_RoomBreadcrumbs_crumb"
@ -98,7 +94,6 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
                    <DecoratedRoomAvatar
                        room={r}
                        avatarSize={32}
-                        tag={roomTag}
                        displayBadge={true}
                        forceCount={true}
                    />
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@ -27,7 +27,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import {DefaultTagID} from "../../../stores/room-list/models";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
@ -177,7 +176,6 @@ export default class RoomHeader extends React.Component {
            roomAvatar = <DecoratedRoomAvatar
                room={this.props.room}
                avatarSize={32}
-                tag={DefaultTagID.Untagged} // to apply room publicity badging
                oobData={this.props.oobData}
                viewAvatarOnClick={true}
            />;
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@ -576,7 +576,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
        const roomAvatar = <DecoratedRoomAvatar
            room={this.props.room}
            avatarSize={32}
-            tag={this.props.tag}
            displayBadge={this.props.isMinimized}
            oobData={({avatarUrl: roomProfile.avatarMxc})}
        />;
--- a/src/components/views/settings/EventIndexPanel.tsx
+++ b/src/components/views/settings/EventIndexPanel.tsx
@ -232,7 +232,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                    <p>
                        {this.state.enabling
                            ? <InlineSpinner />
-                            : _t("Message search initilisation failed")
+                            : _t("Message search initialisation failed")
                        }
                    </p>
                    {EventIndexPeg.error && (
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
@ -22,6 +22,8 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as sdk from "../../../../../index";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import SdkConfig from "../../../../../SdkConfig";
+import BetaCard from "../../../beta/BetaCard";

 export class LabsSettingToggle extends React.Component {
    static propTypes = {
@ -48,14 +50,40 @@ export default class LabsUserSettingsTab extends React.Component {
    }

    render() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const flags = SettingsStore.getFeatureSettingNames().map(f => <LabsSettingToggle featureId={f} key={f} />);
+        const features = SettingsStore.getFeatureSettingNames();
+        const [labs, betas] = features.reduce((arr, f) => {
+            arr[SettingsStore.getBetaInfo(f) ? 1 : 0].push(f);
+            return arr;
+        }, [[], []]);
+
+        let betaSection;
+        if (betas.length) {
+            betaSection = <div className="mx_SettingsTab_section">
+                { betas.map(f => <BetaCard key={f} featureId={f} /> ) }
+            </div>;
+        }
+
+        let labsSection;
+        if (SdkConfig.get()['showLabsSettings']) {
+            const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+            const flags = labs.map(f => <LabsSettingToggle featureId={f} key={f} />);
+
+            labsSection = <div className="mx_SettingsTab_section">
+                {flags}
+                <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
+                <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="lowBandwidth" level={SettingLevel.DEVICE} />
+                <SettingsFlag name="advancedRoomListLogging" level={SettingLevel.DEVICE} />
+            </div>;
+        }
+
        return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_LabsUserSettingsTab">
                <div className="mx_SettingsTab_heading">{_t("Labs")}</div>
                <div className='mx_SettingsTab_subsectionText'>
                    {
-                        _t('Customise your experience with experimental labs features. ' +
+                        _t('Feeling experimental? Labs are the best way to get things early, ' +
+                            'test out new features and help shape them before they actually launch. ' +
                            '<a>Learn more</a>.', {}, {
                            'a': (sub) => {
                                return <a href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
@ -64,13 +92,8 @@ export default class LabsUserSettingsTab extends React.Component {
                        })
                    }
                </div>
-                <div className="mx_SettingsTab_section">
-                    {flags}
-                    <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />
-                    <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"advancedRoomListLogging"} level={SettingLevel.DEVICE} />
-                </div>
+                { betaSection }
+                { labsSection }
            </div>
        );
    }
--- a/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/src/components/views/spaces/SpaceBasicSettings.tsx
@ -32,17 +32,11 @@ interface IProps {
    setTopic(topic: string): void;
 }

-const SpaceBasicSettings = ({
+export const SpaceAvatar = ({
    avatarUrl,
    avatarDisabled = false,
    setAvatar,
-    name = "",
-    nameDisabled = false,
-    setName,
-    topic = "",
-    topicDisabled = false,
-    setTopic,
-}: IProps) => {
+}: Pick<IProps, "avatarUrl" | "avatarDisabled" | "setAvatar">) => {
    const avatarUploadRef = useRef<HTMLInputElement>();
    const [avatar, setAvatarDataUrl] = useState(avatarUrl); // avatar data url cache

@ -81,20 +75,34 @@ const SpaceBasicSettings = ({
        }
    }

+    return <div className="mx_SpaceBasicSettings_avatarContainer">
+        { avatarSection }
+        <input type="file" ref={avatarUploadRef} onChange={(e) => {
+            if (!e.target.files?.length) return;
+            const file = e.target.files[0];
+            setAvatar(file);
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                setAvatarDataUrl(ev.target.result as string);
+            };
+            reader.readAsDataURL(file);
+        }} accept="image/*" />
+    </div>;
+};
+
+const SpaceBasicSettings = ({
+    avatarUrl,
+    avatarDisabled = false,
+    setAvatar,
+    name = "",
+    nameDisabled = false,
+    setName,
+    topic = "",
+    topicDisabled = false,
+    setTopic,
+}: IProps) => {
    return <div className="mx_SpaceBasicSettings">
-        <div className="mx_SpaceBasicSettings_avatarContainer">
-            { avatarSection }
-            <input type="file" ref={avatarUploadRef} onChange={(e) => {
-                if (!e.target.files?.length) return;
-                const file = e.target.files[0];
-                setAvatar(file);
-                const reader = new FileReader();
-                reader.onload = (ev) => {
-                    setAvatarDataUrl(ev.target.result as string);
-                };
-                reader.readAsDataURL(file);
-            }} accept="image/*" />
-        </div>
+        <SpaceAvatar avatarUrl={avatarUrl} avatarDisabled={avatarDisabled} setAvatar={setAvatar} />

        <Field
            name="spaceName"
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@ -14,18 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, {useContext, useState} from "react";
+import React, {useContext, useRef, useState} from "react";
 import classNames from "classnames";
 import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+import FocusLock from "react-focus-lock";

 import {_t} from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
 import createRoom, {IStateEvent, Preset} from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SpaceBasicSettings from "./SpaceBasicSettings";
+import {SpaceAvatar} from "./SpaceBasicSettings";
 import AccessibleButton from "../elements/AccessibleButton";
-import FocusLock from "react-focus-lock";
+import {BetaPill} from "../beta/BetaCard";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {USER_LABS_TAB} from "../dialogs/UserSettingsDialog";
+import Field from "../elements/Field";
+import withValidation from "../elements/Validation";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";

 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
    return (
@ -41,17 +48,39 @@ enum Visibility {
    Private,
 }

+const spaceNameValidator = withValidation({
+    rules: [
+        {
+            key: "required",
+            test: async ({ value }) => !!value,
+            invalid: () => _t("Please enter a name for the space"),
+        },
+    ],
+});
+
 const SpaceCreateMenu = ({ onFinished }) => {
    const cli = useContext(MatrixClientContext);
    const [visibility, setVisibility] = useState<Visibility>(null);
-    const [name, setName] = useState("");
-    const [avatar, setAvatar] = useState<File>(null);
-    const [topic, setTopic] = useState<string>("");
    const [busy, setBusy] = useState<boolean>(false);

-    const onSpaceCreateClick = async () => {
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [avatar, setAvatar] = useState<File>(null);
+    const [topic, setTopic] = useState<string>("");
+
+    const onSpaceCreateClick = async (e) => {
+        e.preventDefault();
        if (busy) return;
+
        setBusy(true);
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            setBusy(false);
+            return;
+        }
+
        const initialState: IStateEvent[] = [
            {
                type: EventType.RoomHistoryVisibility,
@ -107,7 +136,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
    if (visibility === null) {
        body = <React.Fragment>
            <h2>{ _t("Create a space") }</h2>
-            <p>{ _t("Spaces are new ways to group rooms and people. " +
+            <p>{ _t("Spaces are a new way to group rooms and people. " +
                "To join an existing space you'll need an invite.") }</p>

            <SpaceCreateMenuType
@ -124,6 +153,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
            />

            <p>{ _t("You can change this later") }</p>
+
+            <SpaceFeedbackPrompt onClick={onFinished} />
        </React.Fragment>;
    } else {
        body = <React.Fragment>
@ -146,9 +177,32 @@ const SpaceCreateMenu = ({ onFinished }) => {
                }
            </p>

-            <SpaceBasicSettings setAvatar={setAvatar} name={name} setName={setName} topic={topic} setTopic={setTopic} />
+            <form className="mx_SpaceBasicSettings" onSubmit={onSpaceCreateClick}>
+                <SpaceAvatar setAvatar={setAvatar} avatarDisabled={busy} />

-            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={!name || busy}>
+                <Field
+                    name="spaceName"
+                    label={_t("Name")}
+                    autoFocus={true}
+                    value={name}
+                    onChange={ev => setName(ev.target.value)}
+                    ref={spaceNameField}
+                    onValidate={spaceNameValidator}
+                    disabled={busy}
+                />
+
+                <Field
+                    name="spaceTopic"
+                    element="textarea"
+                    label={_t("Description")}
+                    value={topic}
+                    onChange={ev => setTopic(ev.target.value)}
+                    rows={3}
+                    disabled={busy}
+                />
+            </form>
+
+            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={busy}>
                { busy ? _t("Creating...") : _t("Create") }
            </AccessibleButton>
        </React.Fragment>;
@ -164,6 +218,13 @@ const SpaceCreateMenu = ({ onFinished }) => {
        managed={false}
    >
        <FocusLock returnFocus={true}>
+            <BetaPill onClick={() => {
+                onFinished();
+                defaultDispatcher.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: USER_LABS_TAB,
+                });
+            }} />
            { body }
        </FocusLock>
    </ContextMenu>;
--- a/src/components/views/spaces/SpacePublicShare.tsx
+++ b/src/components/views/spaces/SpacePublicShare.tsx
@ -23,6 +23,7 @@ import {copyPlaintext} from "../../../utils/strings";
 import {sleep} from "../../../utils/promise";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {showRoomInviteDialog} from "../../../RoomInvite";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";

 interface IProps {
    space: Room;
@ -50,7 +51,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
            <h3>{ _t("Share invite link") }</h3>
            <span>{ copiedText }</span>
        </AccessibleButton>
-        <AccessibleButton
+        { space.canInvite(MatrixClientPeg.get()?.getUserId()) ? <AccessibleButton
            className="mx_SpacePublicShare_inviteButton"
            onClick={() => {
                showRoomInviteDialog(space.roomId);
@ -59,7 +60,7 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
        >
            <h3>{ _t("Invite people") }</h3>
            <span>{ _t("Invite with email or username") }</span>
-        </AccessibleButton>
+        </AccessibleButton> : null }
    </div>;
 };

--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@ -20,6 +20,7 @@ import {Room} from "matrix-js-sdk/src/models/room";

 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
+import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
 import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton";
 import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton";
@ -68,8 +69,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
    constructor(props) {
        super(props);

+        const collapsed = SpaceTreeLevelLayoutStore.instance.getSpaceCollapsedState(
+            props.space.roomId,
+            this.props.parents,
+            !props.isNested, // default to collapsed for root items
+        );
+
        this.state = {
-            collapsed: !props.isNested, // default to collapsed for root items
+            collapsed: collapsed,
            contextMenuPosition: null,
        };
    }
@ -78,7 +85,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
        if (this.props.onExpand && this.state.collapsed) {
            this.props.onExpand();
        }
-        this.setState({collapsed: !this.state.collapsed});
+        const newCollapsedState = !this.state.collapsed;
+
+        SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
+            this.props.space.roomId,
+            this.props.parents,
+            newCollapsedState,
+        );
+        this.setState({collapsed: newCollapsedState});
        // don't bubble up so encapsulating button for space
        // doesn't get triggered
        evt.stopPropagation();
@ -195,7 +209,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
            const userId = this.context.getUserId();

            let inviteOption;
-            if (this.props.space.canInvite(userId)) {
+            if (this.props.space.getJoinRule() === "public" || this.props.space.canInvite(userId)) {
                inviteOption = (
                    <IconizedContextMenuOption
                        className="mx_SpacePanel_contextMenu_inviteButton"
--- a/src/components/views/voice_messages/PlaybackWaveform.tsx
+++ b/src/components/views/voice_messages/PlaybackWaveform.tsx
@ -57,8 +57,8 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
    };

    private onTimeUpdate = (time: number[]) => {
-        // Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
-        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
+        // 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});
    };