Merge branch 'develop' into resizable-call-view

src/components/structures/FilePanel.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Filter} from 'matrix-js-sdk';
+import {Filter} from 'matrix-js-sdk/src/filter';
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";

src/components/structures/GroupView.js

@@ -35,7 +35,7 @@ import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Permalinks";
-import {Group} from "matrix-js-sdk";
+import {Group} from "matrix-js-sdk/src/models/group";
 import {allSettled, sleep} from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";

src/components/structures/InteractiveAuth.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {InteractiveAuth} from "matrix-js-sdk";
+import {InteractiveAuth} from "matrix-js-sdk/src/interactive-auth";
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 

src/components/structures/LeftPanel.tsx

@@ -38,7 +38,6 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
-import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../customisations/Media";
 
@@ -392,11 +391,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         let leftLeftPanel;
-        // Currently TagPanel.enableTagPanel is disabled when Legacy Communities are disabled so for now
-        // ignore it and force the rendering of SpacePanel if that Labs flag is enabled.
-        if (SettingsStore.getValue("feature_spaces")) {
-            leftLeftPanel = <SpacePanel />;
-        } else if (this.state.showGroupFilterPanel) {
+        if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
                     <GroupFilterPanel />

src/components/structures/LoggedInView.tsx

@@ -56,6 +56,7 @@ import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
 import { IOpts } from "../../createRoom";
+import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 
 // We need to fetch each pinned message individually (if we don't already have it)
@@ -229,21 +230,15 @@ class LoggedInView extends React.Component<IProps, IState> {
         let size;
         let collapsed;
         const collapseConfig: ICollapseConfig = {
-            // TODO: the space panel currently does not have a fixed width,
-            // just the headers at each level have a max-width of 150px
-            // Taking 222px for the space panel for now,
-            // so this will look slightly off for now,
-            // depending on the depth of your space tree.
-            // To fix this, we'll need to turn toggleSize
-            // into a callback so it can be measured when starting the resize operation
-            toggleSize: 222 + 68,
+            // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
+            toggleSize: 206 - 50,
             onCollapsed: (_collapsed) => {
                 collapsed = _collapsed;
                 if (_collapsed) {
-                    dis.dispatch({action: "hide_left_panel"}, true);
+                    dis.dispatch({action: "hide_left_panel"});
                     window.localStorage.setItem("mx_lhs_size", '0');
                 } else {
-                    dis.dispatch({action: "show_left_panel"}, true);
+                    dis.dispatch({action: "show_left_panel"});
                 }
             },
             onResized: (_size) => {
@@ -670,13 +665,6 @@ class LoggedInView extends React.Component<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
-        const leftPanel = (
-            <LeftPanel
-                isMinimized={this.props.collapseLhs || false}
-                resizeNotifier={this.props.resizeNotifier}
-            />
-        );
-
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
@@ -688,7 +676,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>
                         <div ref={this._resizeContainer} className={bodyClasses}>
-                            { leftPanel }
+                            { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                            <LeftPanel
+                                isMinimized={this.props.collapseLhs || false}
+                                resizeNotifier={this.props.resizeNotifier}
+                            />
                             <ResizeHandle />
                             { pageElement }
                         </div>

src/components/structures/MatrixChat.tsx

@@ -1,8 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017-2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,8 +15,7 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
-// @ts-ignore - XXX: no idea why this import fails
-import * as Matrix from "matrix-js-sdk";
+import { createClient } from "matrix-js-sdk/src/matrix";
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -82,9 +78,12 @@ import {UIFeature} from "../../settings/UIFeature";
 import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
+import { shouldUseLoginForWelcome } from "../../utils/pages";
 import SpaceStore from "../../stores/SpaceStore";
 import SpaceRoomDirectory from "./SpaceRoomDirectory";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import RoomListStore from "../../stores/room-list/RoomListStore";
+import {RoomUpdateCause} from "../../stores/room-list/models";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -582,6 +581,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 break;
             case 'logout':
+                dis.dispatch({action: "hangup_all"});
                 Lifecycle.logout();
                 break;
             case 'require_registration':
@@ -606,12 +606,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 if (payload.screenAfterLogin) {
                     this.screenAfterLogin = payload.screenAfterLogin;
                 }
-                this.setStateForNewView({
-                    view: Views.LOGIN,
-                });
-                this.notifyNewScreen('login');
-                ThemeController.isLogin = true;
-                this.themeWatcher.recheck();
+                this.viewLogin();
                 break;
             case 'start_password_recovery':
                 this.setStateForNewView({
@@ -975,6 +970,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     private viewWelcome() {
+        if (shouldUseLoginForWelcome(SdkConfig.get())) {
+            return this.viewLogin();
+        }
         this.setStateForNewView({
             view: Views.WELCOME,
         });
@@ -983,6 +981,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.themeWatcher.recheck();
     }
 
+    private viewLogin(otherState?: any) {
+        this.setStateForNewView({
+            view: Views.LOGIN,
+            ...otherState,
+        });
+        this.notifyNewScreen('login');
+        ThemeController.isLogin = true;
+        this.themeWatcher.recheck();
+    }
+
     private viewHome(justRegistered = false) {
         // The home page requires the "logged in" view, so we'll set that.
         this.setStateForNewView({
@@ -1139,11 +1147,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     private forgetRoom(roomId: string) {
+        const room = MatrixClientPeg.get().getRoom(roomId);
         MatrixClientPeg.get().forget(roomId).then(() => {
             // Switch to home page if we're currently viewing the forgotten room
             if (this.state.currentRoomId === roomId) {
                 dis.dispatch({ action: "view_home_page" });
             }
+
+            // We have to manually update the room list because the forgotten room will not
+            // be notified to us, therefore the room list will have no other way of knowing
+            // the room is forgotten.
+            RoomListStore.instance.manualRoomUpdate(room, RoomUpdateCause.RoomRemoved);
         }).catch((err) => {
             const errCode = err.errcode || _td("unknown error code");
             Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
@@ -1298,17 +1312,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * Called when the session is logged out
      */
     private onLoggedOut() {
-        this.notifyNewScreen('login');
-        this.setStateForNewView({
-            view: Views.LOGIN,
+        this.viewLogin({
             ready: false,
             collapseLhs: false,
             currentRoomId: null,
         });
         this.subTitleStatus = '';
         this.setPageSubtitle();
-        ThemeController.isLogin = true;
-        this.themeWatcher.recheck();
     }
 
     /**
@@ -1648,7 +1658,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             let cli = MatrixClientPeg.get();
             if (!cli) {
                 const {hsUrl, isUrl} = this.props.serverConfig;
-                cli = Matrix.createClient({
+                cli = createClient({
                     baseUrl: hsUrl,
                     idBaseUrl: isUrl,
                 });

src/components/structures/MessagePanel.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
 import * as sdk from '../../index';
-import dis from "../../dispatcher/dispatcher";
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
@@ -210,13 +209,11 @@ export default class MessagePanel extends React.Component {
 
     componentDidMount() {
         this._isMounted = true;
-        this.dispatcherRef = dis.register(this.onAction);
     }
 
     componentWillUnmount() {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
-        dis.unregister(this.dispatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -229,14 +226,6 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    onAction = (payload) => {
-        switch (payload.action) {
-            case "scroll_to_bottom":
-                this.scrollToBottom();
-                break;
-        }
-    }
-
     onShowTypingNotificationsChange = () => {
         this.setState({
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
@@ -1038,6 +1027,97 @@ class CreationGrouper {
     }
 }
 
+class RedactionGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && ev.isRedacted();
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(
+            ev.getId(),
+            ev === lastShownEvent,
+        );
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+            return false;
+        }
+        return ev.isRedacted();
+    }
+
+    add(ev) {
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
+
+        const panel = this.panel;
+        const ret = [];
+        const lastShownEvent = this.lastShownEvent;
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        const key = "redactioneventlistsummary-" + (
+            this.prevEvent ? this.events[0].getId() : "initial"
+        );
+
+        const senders = new Set();
+        let eventTiles = this.events.map((e) => {
+            senders.add(e.sender);
+            // In order to prevent DateSeparators from appearing in the expanded form,
+            // render each member event as if the previous one was itself.
+            // This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <EventListSummary
+                key={key}
+                threshold={2}
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                summaryMembers={Array.from(senders)}
+                summaryText={_t("%(count)s messages deleted.", { count: eventTiles.length })}
+            >
+                { eventTiles }
+            </EventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
 // Wrap consecutive member events in a ListSummary, ignore if redacted
 class MemberGrouper {
     static canStartGroup = function(panel, ev) {
@@ -1148,4 +1228,4 @@ class MemberGrouper {
 }
 
 // all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];

src/components/structures/RoomStatusBar.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Matrix from 'matrix-js-sdk';
 import { _t, _td } from '../../languageHandler';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
@@ -24,6 +23,7 @@ import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {EventStatus} from "matrix-js-sdk/src/models/event";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -32,7 +32,7 @@ const STATUS_BAR_EXPANDED_LARGE = 2;
 function getUnsentMessages(room) {
     if (!room) { return []; }
     return room.getPendingEvents().filter(function(ev) {
-        return ev.status === Matrix.EventStatus.NOT_SENT;
+        return ev.status === EventStatus.NOT_SENT;
     });
 }
 

src/components/structures/TimelinePanel.js

@@ -22,8 +22,8 @@ import {LayoutPropType} from "../../settings/Layout";
 import React, {createRef} from 'react';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-import {EventTimeline} from "matrix-js-sdk";
-import * as Matrix from "matrix-js-sdk";
+import {EventTimeline} from "matrix-js-sdk/src/models/event-timeline";
+import {TimelineWindow} from "matrix-js-sdk/src/timeline-window";
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import UserActivity from "../../UserActivity";
@@ -463,6 +463,9 @@ class TimelinePanel extends React.Component {
                 }
             });
         }
+        if (payload.action === "scroll_to_bottom") {
+            this.jumpToLiveTimeline();
+        }
     };
 
     onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
@@ -1007,7 +1010,7 @@ class TimelinePanel extends React.Component {
      * returns a promise which will resolve when the load completes.
      */
     _loadTimeline(eventId, pixelOffset, offsetBase) {
-        this._timelineWindow = new Matrix.TimelineWindow(
+        this._timelineWindow = new TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
             {windowLimit: this.props.timelineCap});
 

src/components/structures/UserView.js

@@ -17,13 +17,14 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import Matrix from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 import HomePage from "./HomePage";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 
 @replaceableComponent("structures.UserView")
 export default class UserView extends React.Component {
@@ -68,8 +69,8 @@ export default class UserView extends React.Component {
             this.setState({loading: false});
             return;
         }
-        const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
-        const member = new Matrix.RoomMember(null, this.props.userId);
+        const fakeEvent = new MatrixEvent({type: "m.room.member", content: profileInfo});
+        const member = new RoomMember(null, this.props.userId);
         member.setMembershipEvent(fakeEvent);
         this.setState({member, loading: false});
     }

src/components/structures/auth/Registration.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
+import {createClient} from 'matrix-js-sdk/src/matrix';
 import React, {ReactNode} from 'react';
 import {MatrixClient} from "matrix-js-sdk/src/client";
 
@@ -181,7 +181,7 @@ export default class Registration extends React.Component<IProps, IState> {
         }
 
         const {hsUrl, isUrl} = serverConfig;
-        const cli = Matrix.createClient({
+        const cli = createClient({
             baseUrl: hsUrl,
             idBaseUrl: isUrl,
         });

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {Group} from 'matrix-js-sdk';
+import {Group} from 'matrix-js-sdk/src/models/group';
 import GroupStore from "../../../stores/GroupStore";
 import {MenuItem} from "../../structures/ContextMenu";
 import {replaceableComponent} from "../../../utils/replaceableComponent";

src/components/views/context_menus/MessageContextMenu.js

@@ -19,7 +19,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';

src/components/views/dialogs/DevtoolsDialog.js

@@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import { Room, MatrixEvent } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -39,6 +38,8 @@ import SettingsStore, {LEVEL_ORDER} from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 
 class GenericEditor extends React.PureComponent {
     // static propTypes = {onBack: PropTypes.func.isRequired};

src/components/views/dialogs/FeedbackDialog.js

@@ -100,6 +100,20 @@ export default (props) => {
         );
     }
 
+    let bugReports = null;
+    if (SdkConfig.get().bug_report_endpoint_url) {
+        bugReports = (
+            <p>{
+                _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>
+                    ),
+                })
+            }</p>
+        );
+    }
+
     return (<QuestionDialog
         className="mx_FeedbackDialog"
         hasCancelButton={!!hasFeedback}
@@ -120,14 +134,7 @@ export default (props) => {
                         },
                     })
                 }</p>
-                <p>{
-                    _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>
-                        ),
-                    })
-                }</p>
+                {bugReports}
             </div>
             { countlyFeedbackSection }
         </React.Fragment>}

src/components/views/dialogs/InviteDialog.tsx

@@ -1256,7 +1256,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 ? _t("Invite to %(spaceName)s", {
                     spaceName: room.name || _t("Unnamed Space"),
                 })
-                : _t("Invite to this room");
+                : _t("Invite to %(roomName)s", {
+                    roomName: room.name || _t("Unnamed Room"),
+                });
 
             let helpTextUntranslated;
             if (isSpace) {

src/components/views/dialogs/ReportEventDialog.js

@@ -18,7 +18,7 @@ import React, {PureComponent} from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import SdkConfig from '../../../SdkConfig';
 import Markdown from '../../../Markdown';

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -82,6 +82,33 @@ export default class RoomUpgradeWarningDialog extends React.Component {
 
         const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
 
+        let bugReports = (
+            <p>
+                {_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},
+                )}
+            </p>
+        );
+        if (SdkConfig.get().bug_report_endpoint_url) {
+            bugReports = (
+                <p>
+                    {_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>.",
+                        {
+                            brand,
+                        },
+                        {
+                            "a": (sub) => {
+                                return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
+                            },
+                        },
+                    )}
+                </p>
+            );
+        }
+
         return (
             <BaseDialog
                 className='mx_RoomUpgradeWarningDialog'
@@ -97,20 +124,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                             "is unstable due to bugs, missing features or security vulnerabilities.",
                         )}
                     </p>
-                    <p>
-                        {_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>.",
-                            {
-                                brand,
-                            },
-                            {
-                                "a": (sub) => {
-                                    return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
-                                },
-                            },
-                        )}
-                    </p>
+                    {bugReports}
                     <p>
                         {_t(
                             "You'll upgrade this room from <oldVersion /> to <newVersion />.",

src/components/views/dialogs/TabbedIntegrationManagerDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk";
+import {Room} from "matrix-js-sdk/src/models/room";
 import * as sdk from '../../../index';
 import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
 import classNames from 'classnames';

src/components/views/dialogs/TermsDialog.js

@@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
-import Matrix from 'matrix-js-sdk';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
 
 class TermsCheckbox extends React.PureComponent {
     static propTypes = {
@@ -85,22 +85,22 @@ export default class TermsDialog extends React.PureComponent {
 
     _nameForServiceType(serviceType, host) {
         switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                 return <div>{_t("Identity Server")}<br />({host})</div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                 return <div>{_t("Integration Manager")}<br />({host})</div>;
         }
     }
 
     _summaryForServiceType(serviceType) {
         switch (serviceType) {
-            case Matrix.SERVICE_TYPES.IS:
+            case SERVICE_TYPES.IS:
                 return <div>
                     {_t("Find others by phone or email")}
                     <br />
                     {_t("Be found by phone or email")}
                 </div>;
-            case Matrix.SERVICE_TYPES.IM:
+            case SERVICE_TYPES.IM:
                 return <div>
                     {_t("Use bots, bridges, widgets and sticker packs")}
                 </div>;

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

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';
 

src/components/views/elements/Pill.js

@@ -17,7 +17,8 @@ import React from 'react';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";

src/components/views/elements/ReplyThread.js

@@ -21,7 +21,7 @@ import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import {wantsDateSeparator} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
 import {LayoutPropType} from "../../../settings/Layout";

src/components/views/messages/EditHistoryMessage.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
 import {formatTime} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';

src/components/views/messages/MessageActionBar.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
-import { EventStatus } from 'matrix-js-sdk';
+import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';

src/components/views/room_settings/RelatedGroupSettings.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixEvent} from 'matrix-js-sdk';
+import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';

src/components/views/rooms/EditMessageComposer.js

@@ -27,7 +27,7 @@ import {parseEvent} from '../../../editor/deserialize';
 import {PartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import classNames from 'classnames';
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";

src/components/views/rooms/EventTile.js

@@ -28,7 +28,7 @@ import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Layout, LayoutPropType} from "../../../settings/Layout";
-import {EventStatus} from 'matrix-js-sdk';
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";

src/components/views/rooms/RoomTile.tsx

@@ -333,6 +333,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.setState({generalMenuPosition: null}); // hide the menu
     };
 
+    private onInviteClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.room.roomId,
+        });
+        this.setState({generalMenuPosition: null}); // hide the menu
+    };
+
     private async saveNotifState(ev: ButtonEvent, newState: Volume) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -453,6 +464,8 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             const isLowPriority = roomTags.includes(DefaultTagID.LowPriority);
             const lowPriorityLabel = _t("Low Priority");
 
+            const userId = MatrixClientPeg.get().getUserId();
+            const canInvite = this.props.room.canInvite(userId);
             contextMenu = <IconizedContextMenu
                 {...contextMenuBelow(this.state.generalMenuPosition)}
                 onFinished={this.onCloseGeneralMenu}
@@ -472,7 +485,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                         label={lowPriorityLabel}
                         iconClassName="mx_RoomTile_iconArrowDown"
                     />
-
+                    {canInvite ? (
+                        <IconizedContextMenuOption
+                            onClick={this.onInviteClick}
+                            label={_t("Invite People")}
+                            iconClassName="mx_RoomTile_iconInvite"
+                        />
+                    ) : null}
                     <IconizedContextMenuOption
                         onClick={this.onOpenRoomSettings}
                         label={_t("Settings")}

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {MatrixEvent} from "matrix-js-sdk";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -32,7 +32,7 @@ import * as sdk from "../../../../..";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
 import {Service, startTermsFlow} from "../../../../../Terms";
-import {SERVICE_TYPES} from "matrix-js-sdk";
+import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
 import IdentityAuthClient from "../../../../../IdentityAuthClient";
 import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';

src/components/views/settings/tabs/user/VoiceUserSettingsTab.js

@@ -84,6 +84,7 @@ export default class VoiceUserSettingsTab extends React.Component {
             }
         }
         if (error) {
+            console.log("Failed to list userMedia devices", error);
             const brand = SdkConfig.get().brand;
             const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             Modal.createTrackedDialog('No media permissions', '', ErrorDialog, {

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -51,6 +51,7 @@ interface IItemProps {
     isNested?: boolean;
     isPanelCollapsed?: boolean;
     onExpand?: Function;
+    parents?: Set<string>;
 }
 
 interface IItemState {
@@ -299,7 +300,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const isNarrow = this.props.isPanelCollapsed;
         const collapsed = this.state.collapsed || forceCollapsed;
 
-        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId);
+        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
+            .filter(s => !this.props.parents?.has(s.roomId));
         const isActive = activeSpaces.includes(space);
         const itemClasses = classNames({
             "mx_SpaceItem": true,
@@ -312,11 +314,17 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             mx_SpaceButton_narrow: isNarrow,
         });
         const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
-        const childItems = childSpaces && !collapsed ? <SpaceTreeLevel
-            spaces={childSpaces}
-            activeSpaces={activeSpaces}
-            isNested={true}
-        /> : null;
+
+        let childItems;
+        if (childSpaces && !collapsed) {
+            childItems = <SpaceTreeLevel
+                spaces={childSpaces}
+                activeSpaces={activeSpaces}
+                isNested={true}
+                parents={new Set(this.props.parents).add(this.props.space.roomId)}
+            />;
+        }
+
         let notifBadge;
         if (notificationState) {
             notifBadge = <div className="mx_SpacePanel_badgeContainer">
@@ -383,12 +391,14 @@ interface ITreeLevelProps {
     spaces: Room[];
     activeSpaces: Room[];
     isNested?: boolean;
+    parents: Set<string>;
 }
 
 const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
     spaces,
     activeSpaces,
     isNested,
+    parents,
 }) => {
     return <ul className="mx_SpaceTreeLevel">
         {spaces.map(s => {
@@ -397,6 +407,7 @@ const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
                 activeSpaces={activeSpaces}
                 space={s}
                 isNested={isNested}
+                parents={parents}
             />);
         })}
     </ul>;