Merge branches 'develop' and 't3chguy/rightpanel' of github.com:matrix-org/matrix-react-sdk into t3chguy/rightpanel

src/components/structures/LoggedInView.js

@@ -393,13 +393,6 @@ const LoggedInView = createReactClass({
                 return;
             }
 
-            // XXX: Remove after CIDER replaces Slate completely: https://github.com/vector-im/riot-web/issues/11036
-            // If using Slate, consume the Backspace without first focusing as it causes an implosion
-            if (ev.key === Key.BACKSPACE && !SettingsStore.getValue("useCiderComposer")) {
-                ev.stopPropagation();
-                return;
-            }
-
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
                 dis.dispatch({action: 'focus_composer'}, true);

src/components/structures/RoomView.js

@@ -157,8 +157,6 @@ module.exports = createReactClass({
 
             canReact: false,
             canReply: false,
-
-            useCider: false,
         };
     },
 
@@ -180,18 +178,10 @@ module.exports = createReactClass({
 
         WidgetEchoStore.on('update', this._onWidgetEchoStoreUpdate);
 
-        this._onCiderUpdated();
-        this._ciderWatcherRef = SettingsStore.watchSetting(
-            "useCiderComposer", null, this._onCiderUpdated);
-
         this._roomView = createRef();
         this._searchResultsPanel = createRef();
     },
 
-    _onCiderUpdated: function() {
-        this.setState({useCider: SettingsStore.getValue("useCiderComposer")});
-    },
-
     _onRoomViewStoreUpdate: function(initial) {
         if (this.unmounted) {
             return;
@@ -1806,29 +1796,16 @@ module.exports = createReactClass({
             myMembership === 'join' && !this.state.searchResults
         );
         if (canSpeak) {
-            if (this.state.useCider) {
-                const MessageComposer = sdk.getComponent('rooms.MessageComposer');
-                messageComposer =
-                    <MessageComposer
-                        room={this.state.room}
-                        callState={this.state.callState}
-                        disabled={this.props.disabled}
-                        showApps={this.state.showApps}
-                        e2eStatus={this.state.e2eStatus}
-                        permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
-                    />;
-            } else {
-                const SlateMessageComposer = sdk.getComponent('rooms.SlateMessageComposer');
-                messageComposer =
-                    <SlateMessageComposer
-                        room={this.state.room}
-                        callState={this.state.callState}
-                        disabled={this.props.disabled}
-                        showApps={this.state.showApps}
-                        e2eStatus={this.state.e2eStatus}
-                        permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
-                    />;
-            }
+            const MessageComposer = sdk.getComponent('rooms.MessageComposer');
+            messageComposer =
+                <MessageComposer
+                    room={this.state.room}
+                    callState={this.state.callState}
+                    disabled={this.props.disabled}
+                    showApps={this.state.showApps}
+                    e2eStatus={this.state.e2eStatus}
+                    permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
+                />;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format

src/components/views/context_menus/MessageContextMenu.js

@@ -422,7 +422,7 @@ module.exports = createReactClass({
             </MenuItem>
         );
 
-        if (this.props.eventTileOps && this.props.eventTileOps.getInnerText) {
+        if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
                     { _t('Quote') }

src/components/views/dialogs/DMInviteDialog.js

@@ -23,23 +23,48 @@ import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {RoomMember} from "matrix-js-sdk/lib/matrix";
 import * as humanize from "humanize";
+import SdkConfig from "../../../SdkConfig";
+import {getHttpUriForMxc} from "matrix-js-sdk/lib/content-repo";
 
 // TODO: [TravisR] Make this generic for all kinds of invites
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
+class DirectoryMember {
+    _userId: string;
+    _displayName: string;
+    _avatarUrl: string;
+
+    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
+        this._userId = userDirResult.user_id;
+        this._displayName = userDirResult.display_name;
+        this._avatarUrl = userDirResult.avatar_url;
+    }
+
+    // These next members are to implement the contract expected by DMRoomTile
+    get name(): string {
+        return this._displayName || this._userId;
+    }
+
+    get userId(): string {
+        return this._userId;
+    }
+
+    getMxcAvatarUrl(): string {
+        return this._avatarUrl;
+    }
+}
+
 class DMRoomTile extends React.PureComponent {
     static propTypes = {
+        // Has properties to match RoomMember: userId (str), name (str), getMxcAvatarUrl(): string
         member: PropTypes.object.isRequired,
         lastActiveTs: PropTypes.number,
         onToggle: PropTypes.func.isRequired,
+        highlightWord: PropTypes.string,
     };
 
-    constructor() {
-        super();
-    }
-
     _onClick = (e) => {
         // Stop the browser from highlighting text
         e.preventDefault();
@@ -48,8 +73,44 @@ class DMRoomTile extends React.PureComponent {
         this.props.onToggle(this.props.member.userId);
     };
 
+    _highlightName(str: string) {
+        if (!this.props.highlightWord) return str;
+
+        // We convert things to lowercase for index searching, but pull substrings from
+        // the submitted text to preserve case. Note: we don't need to htmlEntities the
+        // string because React will safely encode the text for us.
+        const lowerStr = str.toLowerCase();
+        const filterStr = this.props.highlightWord.toLowerCase();
+
+        const result = [];
+
+        let i = 0;
+        let ii;
+        while ((ii = lowerStr.indexOf(filterStr, i)) >= 0) {
+            // Push any text we missed (first bit/middle of text)
+            if (ii > i) {
+                // Push any text we aren't highlighting (middle of text match, or beginning of text)
+                result.push(<span key={i + 'begin'}>{str.substring(i, ii)}</span>);
+            }
+
+            i = ii; // copy over ii only if we have a match (to preserve i for end-of-text matching)
+
+            // Highlight the word the user entered
+            const substr = str.substring(i, filterStr.length + i);
+            result.push(<span className='mx_DMInviteDialog_roomTile_highlight' key={i + 'bold'}>{substr}</span>);
+            i += substr.length;
+        }
+
+        // Push any text we missed (end of text)
+        if (i < (str.length - 1)) {
+            result.push(<span key={i + 'end'}>{str.substring(i)}</span>);
+        }
+
+        return result;
+    }
+
     render() {
-        const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
         let timestamp = null;
         if (this.props.lastActiveTs) {
@@ -59,11 +120,22 @@ class DMRoomTile extends React.PureComponent {
             timestamp = <span className='mx_DMInviteDialog_roomTile_time'>{humanTs}</span>;
         }
 
+        const avatarSize = 36;
+        const avatarUrl = getHttpUriForMxc(
+            MatrixClientPeg.get().getHomeserverUrl(), this.props.member.getMxcAvatarUrl(),
+            avatarSize, avatarSize, "crop");
+
         return (
             <div className='mx_DMInviteDialog_roomTile' onClick={this._onClick}>
-                <MemberAvatar member={this.props.member} width={36} height={36} />
-                <span className='mx_DMInviteDialog_roomTile_name'>{this.props.member.name}</span>
-                <span className='mx_DMInviteDialog_roomTile_userId'>{this.props.member.userId}</span>
+                <BaseAvatar
+                    url={avatarUrl}
+                    name={this.props.member.name}
+                    idName={this.props.member.userId}
+                    width={avatarSize}
+                    height={avatarSize}
+                />
+                <span className='mx_DMInviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
+                <span className='mx_DMInviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
                 {timestamp}
             </div>
         );
@@ -76,6 +148,8 @@ export default class DMInviteDialog extends React.PureComponent {
         onFinished: PropTypes.func.isRequired,
     };
 
+    _debounceTimer: number = null;
+
     constructor() {
         super();
 
@@ -84,6 +158,9 @@ export default class DMInviteDialog extends React.PureComponent {
             filterText: "",
             recents: this._buildRecents(),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
+            suggestions: this._buildSuggestions(),
+            numSuggestionsShown: INITIAL_ROOMS_SHOWN,
+            serverResultsMixin: [], // { user: DirectoryMember, userId: string }[], like recents and suggestions
         };
     }
 
@@ -109,6 +186,64 @@ export default class DMInviteDialog extends React.PureComponent {
         return recents;
     }
 
+    _buildSuggestions(): {userId: string, user: RoomMember} {
+        const maxConsideredMembers = 200;
+        const client = MatrixClientPeg.get();
+        const excludedUserIds = [client.getUserId(), SdkConfig.get()['welcomeUserId']];
+        const joinedRooms = client.getRooms()
+            .filter(r => r.getMyMembership() === 'join')
+            .filter(r => r.getJoinedMemberCount() <= maxConsideredMembers);
+
+        // Generates { userId: {member, rooms[]} }
+        const memberRooms = joinedRooms.reduce((members, room) => {
+            const joinedMembers = room.getJoinedMembers().filter(u => !excludedUserIds.includes(u.userId));
+            for (const member of joinedMembers) {
+                if (!members[member.userId]) {
+                    members[member.userId] = {
+                        member: member,
+                        // Track the room size of the 'picked' member so we can use the profile of
+                        // the smallest room (likely a DM).
+                        pickedMemberRoomSize: room.getJoinedMemberCount(),
+                        rooms: [],
+                    };
+                }
+
+                members[member.userId].rooms.push(room);
+
+                if (room.getJoinedMemberCount() < members[member.userId].pickedMemberRoomSize) {
+                    members[member.userId].member = member;
+                    members[member.userId].pickedMemberRoomSize = room.getJoinedMemberCount();
+                }
+            }
+            return members;
+        }, {});
+
+        // Generates { userId: {member, numRooms, score} }
+        const memberScores = Object.values(memberRooms).reduce((scores, entry) => {
+            const numMembersTotal = entry.rooms.reduce((c, r) => c + r.getJoinedMemberCount(), 0);
+            const maxRange = maxConsideredMembers * entry.rooms.length;
+            scores[entry.member.userId] = {
+                member: entry.member,
+                numRooms: entry.rooms.length,
+                score: Math.max(0, Math.pow(1 - (numMembersTotal / maxRange), 5)),
+            };
+            return scores;
+        }, {});
+
+        const members = Object.values(memberScores);
+        members.sort((a, b) => {
+            if (a.score === b.score) {
+                if (a.numRooms === b.numRooms) {
+                    return a.member.userId.localeCompare(b.member.userId);
+                }
+
+                return b.numRooms - a.numRooms;
+            }
+            return b.score - a.score;
+        });
+        return members.map(m => ({userId: m.member.userId, user: m.member}));
+    }
+
     _startDm = () => {
         this.props.onFinished(this.state.targets);
     };
@@ -118,13 +253,45 @@ export default class DMInviteDialog extends React.PureComponent {
     };
 
     _updateFilter = (e) => {
-        this.setState({filterText: e.target.value});
+        const term = e.target.value;
+        this.setState({filterText: term});
+
+        // Debounce server lookups to reduce spam. We don't clear the existing server
+        // results because they might still be vaguely accurate, likewise for races which
+        // could happen here.
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+        }
+        this._debounceTimer = setTimeout(() => {
+            MatrixClientPeg.get().searchUserDirectory({term}).then(r => {
+                if (term !== this.state.filterText) {
+                    // Discard the results - we were probably too slow on the server-side to make
+                    // these results useful. This is a race we want to avoid because we could overwrite
+                    // more accurate results.
+                    return;
+                }
+                this.setState({
+                    serverResultsMixin: r.results.map(u => ({
+                        userId: u.user_id,
+                        user: new DirectoryMember(u),
+                    })),
+                });
+            }).catch(e => {
+                console.error("Error searching user directory:");
+                console.error(e);
+                this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+            });
+        }, 150); // 150ms debounce (human reaction time + some)
     };
 
     _showMoreRecents = () => {
         this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
     };
 
+    _showMoreSuggestions = () => {
+        this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
+    };
+
     _toggleMember = (userId) => {
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(userId);
@@ -133,29 +300,71 @@ export default class DMInviteDialog extends React.PureComponent {
         this.setState({targets});
     };
 
-    _renderRecents() {
-        if (!this.state.recents || this.state.recents.length === 0) return null;
+    _renderSection(kind: "recents"|"suggestions") {
+        let sourceMembers = kind === 'recents' ? this.state.recents : this.state.suggestions;
+        let showNum = kind === 'recents' ? this.state.numRecentsShown : this.state.numSuggestionsShown;
+        const showMoreFn = kind === 'recents' ? this._showMoreRecents.bind(this) : this._showMoreSuggestions.bind(this);
+        const lastActive = (m) => kind === 'recents' ? m.lastActive : null;
+        const sectionName = kind === 'recents' ? _t("Recent Conversations") : _t("Suggestions");
+
+        // Mix in the server results if we have any, but only if we're searching
+        if (this.state.filterText && this.state.serverResultsMixin && kind === 'suggestions') {
+            // only pick out the server results that aren't already covered though
+            const uniqueServerResults = this.state.serverResultsMixin
+                .filter(u => !sourceMembers.some(m => m.userId === u.userId));
+
+            sourceMembers = sourceMembers.concat(uniqueServerResults);
+        }
+
+        // Hide the section if there's nothing to filter by
+        if (!sourceMembers || sourceMembers.length === 0) return null;
+
+        // Do some simple filtering on the input before going much further. If we get no results, say so.
+        if (this.state.filterText) {
+            const filterBy = this.state.filterText.toLowerCase();
+            sourceMembers = sourceMembers
+                .filter(m => m.user.name.toLowerCase().includes(filterBy) || m.userId.toLowerCase().includes(filterBy));
+
+            if (sourceMembers.length === 0) {
+                return (
+                    <div className='mx_DMInviteDialog_section'>
+                        <h3>{sectionName}</h3>
+                        <p>{_t("No results")}</p>
+                    </div>
+                );
+            }
+        }
+
+        // If we're going to hide one member behind 'show more', just use up the space of the button
+        // with the member's tile instead.
+        if (showNum === sourceMembers.length - 1) showNum++;
 
         // .slice() will return an incomplete array but won't error on us if we go too far
-        const toRender = this.state.recents.slice(0, this.state.numRecentsShown);
-        const hasMore = toRender.length < this.state.recents.length;
+        const toRender = sourceMembers.slice(0, showNum);
+        const hasMore = toRender.length < sourceMembers.length;
 
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         let showMore = null;
         if (hasMore) {
             showMore = (
-                <AccessibleButton onClick={this._showMoreRecents} kind="link">
+                <AccessibleButton onClick={showMoreFn} kind="link">
                     {_t("Show more")}
                 </AccessibleButton>
             );
         }
 
         const tiles = toRender.map(r => (
-            <DMRoomTile member={r.user} lastActiveTs={r.lastActive} key={r.userId} onToggle={this._toggleMember} />
+            <DMRoomTile
+                member={r.user}
+                lastActiveTs={lastActive(r)}
+                key={r.userId}
+                onToggle={this._toggleMember}
+                highlightWord={this.state.filterText}
+            />
         ));
         return (
             <div className='mx_DMInviteDialog_section'>
-                <h3>{_t("Recent Conversations")}</h3>
+                <h3>{sectionName}</h3>
                 {tiles}
                 {showMore}
             </div>
@@ -175,7 +384,6 @@ export default class DMInviteDialog extends React.PureComponent {
                     id="inviteTargets"
                     value={this.state.filterText}
                     onChange={this._updateFilter}
-                    placeholder="TODO: Implement filtering/searching (vector-im/riot-web#11199)"
                 />
             </div>
         );
@@ -209,7 +417,8 @@ export default class DMInviteDialog extends React.PureComponent {
                             {_t("Go")}
                         </AccessibleButton>
                     </div>
-                    {this._renderRecents()}
+                    {this._renderSection('recents')}
+                    {this._renderSection('suggestions')}
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/RoomSettingsDialog.js

@@ -24,9 +24,11 @@ import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
 import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
 import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab";
+import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
@@ -52,6 +54,9 @@ export default class RoomSettingsDialog extends React.Component {
 
     _getTabs() {
         const tabs = [];
+        const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
+        const shouldShowBridgeIcon = featureFlag &&
+            BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
 
         tabs.push(new Tab(
             _td("General"),
@@ -73,6 +78,15 @@ export default class RoomSettingsDialog extends React.Component {
             "mx_RoomSettingsDialog_rolesIcon",
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
+
+        if (shouldShowBridgeIcon) {
+            tabs.push(new Tab(
+                _td("Bridge Info"),
+                "mx_RoomSettingsDialog_bridgesIcon",
+                <BridgeSettingsTab roomId={this.props.roomId} />,
+            ));
+        }
+
         tabs.push(new Tab(
             _td("Advanced"),
             "mx_RoomSettingsDialog_warningIcon",

src/components/views/elements/LazyRenderList.js

@@ -56,14 +56,20 @@ class ItemRange {
 }
 
 export default class LazyRenderList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
     static getDerivedStateFromProps(props, state) {
         const range = LazyRenderList.getVisibleRangeFromProps(props);
         const intersectRange = range.expand(props.overflowMargin);
         const renderRange = range.expand(props.overflowItems);
-        const listHasChangedSize = !!state && renderRange.totalSize() !== state.renderRange.totalSize();
+        const listHasChangedSize = !!state.renderRange && renderRange.totalSize() !== state.renderRange.totalSize();
         // only update render Range if the list has shrunk/grown and we need to adjust padding OR
         // if the new range + overflowMargin isn't contained by the old anymore
-        if (listHasChangedSize || !state || !state.renderRange.contains(intersectRange)) {
+        if (listHasChangedSize || !state.renderRange || !state.renderRange.contains(intersectRange)) {
             return {renderRange};
         }
         return null;

src/components/views/elements/Pill.js

@@ -261,7 +261,7 @@ const Pill = createReactClass({
         }
 
         const classes = classNames("mx_Pill", pillClass, {
-            "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+            "mx_UserPill_me": userId === MatrixClientPeg.get().getUserId(),
             "mx_UserPill_selected": this.props.isSelected,
         });
 

src/components/views/elements/TagTile.js

@@ -55,6 +55,8 @@ export default createReactClass({
             hover: false,
             // The profile data of the group if this.props.tag is a group ID
             profile: null,
+            // Whether or not the context menu is open
+            menuDisplayed: false,
         };
     },
 

src/components/views/emojipicker/EmojiPicker.js

@@ -47,10 +47,8 @@ class EmojiPicker extends React.Component {
             viewportHeight: 280,
         };
 
-        // Convert recent emoji characters to emoji data, removing unknowns.
-        this.recentlyUsed = recent.get()
-            .map(unicode => getEmojiFromUnicode(unicode))
-            .filter(data => !!data);
+        // Convert recent emoji characters to emoji data, removing unknowns and duplicates
+        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean)));
         this.memoizedDataByCategory = {
             recent: this.recentlyUsed,
             ...DATA_BY_CATEGORY,

src/components/views/groups/GroupPublicityToggle.js

@@ -32,7 +32,7 @@ export default createReactClass({
         return {
             busy: false,
             ready: false,
-            isGroupPublicised: null,
+            isGroupPublicised: false, // assume false as <ToggleSwitch /> expects a boolean
         };
     },
 
@@ -43,7 +43,7 @@ export default createReactClass({
     _initGroupStore: function(groupId) {
         this._groupStoreToken = GroupStore.registerListener(groupId, () => {
             this.setState({
-                isGroupPublicised: GroupStore.getGroupPublicity(groupId),
+                isGroupPublicised: Boolean(GroupStore.getGroupPublicity(groupId)),
                 ready: GroupStore.isStateReady(groupId, GroupStore.STATE_KEY.Summary),
             });
         });

src/components/views/messages/TextualBody.js

@@ -98,12 +98,12 @@ module.exports = createReactClass({
     },
 
     _applyFormatting() {
-        this.activateSpoilers(this._content.current.children);
+        this.activateSpoilers([this._content.current]);
 
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
-        pillifyLinks(this._content.current.children, this.props.mxEvent);
+        pillifyLinks([this._content.current], this.props.mxEvent);
         HtmlUtils.linkifyElement(this._content.current);
         this.calculateUrlPreview();
 
@@ -167,7 +167,8 @@ module.exports = createReactClass({
         //console.info("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
         if (this.props.showUrlPreview) {
-            let links = this.findLinks(this._content.current.children);
+            // pass only the first child which is the event tile otherwise this recurses on edited events
+            let links = this.findLinks([this._content.current]);
             if (links.length) {
                 // de-dup the links (but preserve ordering)
                 const seen = new Set();
@@ -329,10 +330,6 @@ module.exports = createReactClass({
                     global.localStorage.removeItem("hide_preview_" + this.props.mxEvent.getId());
                 }
             },
-
-            getInnerText: () => {
-                return this._content.current.innerText;
-            },
         };
     },
 
@@ -433,6 +430,7 @@ module.exports = createReactClass({
             disableBigEmoji: content.msgtype === "m.emote" || !SettingsStore.getValue('TextualBody.enableBigEmoji'),
             // Part of Replies fallback support
             stripReplyFallback: stripReply,
+            ref: this._content,
         });
         if (this.props.replacingEventId) {
             body = [body, this._renderEditedMarker()];
@@ -459,15 +457,14 @@ module.exports = createReactClass({
 
         switch (content.msgtype) {
             case "m.emote":
-                const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
                 return (
-                    <span ref={this._content} className="mx_MEmoteBody mx_EventTile_content">
+                    <span className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
                         <span
                             className="mx_MEmoteBody_sender"
                             onClick={this.onEmoteSenderClick}
                         >
-                            { name }
+                            { mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender() }
                         </span>
                         &nbsp;
                         { body }
@@ -476,14 +473,14 @@ module.exports = createReactClass({
                 );
             case "m.notice":
                 return (
-                    <span ref={this._content} className="mx_MNoticeBody mx_EventTile_content">
+                    <span className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                         { widgets }
                     </span>
                 );
             default: // including "m.text"
                 return (
-                    <span ref={this._content} className="mx_MTextBody mx_EventTile_content">
+                    <span className="mx_MTextBody mx_EventTile_content">
                         { body }
                         { widgets }
                     </span>

src/components/views/right_panel/UserInfo.js

@@ -32,7 +32,7 @@ import SdkConfig from '../../../SdkConfig';
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventTimeline} from "matrix-js-sdk";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import * as RoomViewStore from "../../../stores/RoomViewStore";
+import RoomViewStore from "../../../stores/RoomViewStore";
 import MultiInviter from "../../../utils/MultiInviter";
 import GroupStore from "../../../stores/GroupStore";
 import MatrixClientPeg from "../../../MatrixClientPeg";
@@ -1000,6 +1000,8 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
 
     // Load room if we are given a room id and memoize it
     const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
+    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
 
     // only display the devices list if our client supports E2E
     const _enableDevices = cli.isCryptoEnabled();
@@ -1031,7 +1033,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         setPendingUpdateCount(pendingUpdateCount - 1);
     }, [pendingUpdateCount]);
 
-    const roomPermissions = useRoomPermissions(cli, room, user);
+    const roomPermissions = useRoomPermissions(cli, room, member);
 
     const onSynapseDeactivate = useCallback(async () => {
         const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
@@ -1064,7 +1066,6 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     }, [cli, user.userId]);
 
     const onMemberAvatarClick = useCallback(() => {
-        const member = user;
         const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
 
@@ -1076,7 +1077,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         };
 
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
-    }, [cli, user]);
+    }, [cli, member]);
 
     let synapseDeactivateButton;
     let spinner;
@@ -1093,11 +1094,11 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     }
 
     let adminToolsContainer;
-    if (room && user.roomId) {
+    if (room && member.roomId) {
         adminToolsContainer = (
             <RoomAdminToolsContainer
                 powerLevels={powerLevels}
-                member={user}
+                member={member}
                 room={room}
                 startUpdating={startUpdating}
                 stopUpdating={stopUpdating}>
@@ -1127,20 +1128,20 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const displayName = user.name || user.displayname;
+    const displayName = member.name || member.displayname;
 
     let presenceState;
     let presenceLastActiveAgo;
     let presenceCurrentlyActive;
     let statusMessage;
 
-    if (user instanceof RoomMember && user.user) {
-        presenceState = user.user.presence;
-        presenceLastActiveAgo = user.user.lastActiveAgo;
-        presenceCurrentlyActive = user.user.currentlyActive;
+    if (member instanceof RoomMember && member.user) {
+        presenceState = member.user.presence;
+        presenceLastActiveAgo = member.user.lastActiveAgo;
+        presenceCurrentlyActive = member.user.currentlyActive;
 
         if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            statusMessage = user.user._unstable_statusMessage;
+            statusMessage = member.user._unstable_statusMessage;
         }
     }
 
@@ -1170,13 +1171,13 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
             <div>
                 <div>
                     <MemberAvatar
-                        member={user}
+                        member={member}
                         width={2 * 0.3 * window.innerHeight} // 2x@30vh
                         height={2 * 0.3 * window.innerHeight} // 2x@30vh
                         resizeMethod="scale"
-                        fallbackUserId={user.userId}
+                        fallbackUserId={member.userId}
                         onClick={onMemberAvatarClick}
-                        urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
                 </div>
             </div>
         </div>
@@ -1190,10 +1191,14 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
             title={_t('Close')} />;
     }
 
-    const memberDetails = <PowerLevelSection
-        powerLevels={powerLevels}
-        user={user} room={room} roomPermissions={roomPermissions}
-    />;
+    const memberDetails = (
+        <PowerLevelSection
+            powerLevels={powerLevels}
+            user={member}
+            room={room}
+            roomPermissions={roomPermissions}
+        />
+    );
 
     const isRoomEncrypted = useIsEncrypted(cli, room);
     // undefined means yet to be loaded, null means failed to load, otherwise list of devices
@@ -1329,7 +1334,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
                     devices={devices}
                     canInvite={roomPermissions.canInvite}
                     isIgnored={isIgnored}
-                    member={user} />
+                    member={member} />
 
                 { adminToolsContainer }
 

src/components/views/room_settings/AliasSettings.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import EditableItemList from "../elements/EditableItemList";
 
-const React = require('react');
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
@@ -28,22 +28,41 @@ import AccessibleButton from "../elements/AccessibleButton";
 const Modal = require("../../../Modal");
 
 class EditableAliasesList extends EditableItemList {
+    constructor(props) {
+        super(props);
+
+        this._aliasField = createRef();
+    }
+
+    _onAliasAdded = async () => {
+        await this._aliasField.current.validate({ allowEmpty: false });
+
+        if (this._aliasField.current.isValid) {
+            if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
+            return;
+        }
+
+        this._aliasField.current.focus();
+        this._aliasField.current.validate({ allowEmpty: false, focused: true });
+    };
+
     _renderNewItemField() {
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
         const onChange = (alias) => this._onNewItemChanged({target: {value: alias}});
         return (
             <form
-                onSubmit={this._onItemAdded}
+                onSubmit={this._onAliasAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
                 <RoomAliasField
                     id={`mx_EditableItemList_new_${this.props.id}`}
+                    ref={this._aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
                     domain={this.props.domain} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary">
+                <AccessibleButton onClick={this._onAliasAdded} kind="primary">
                     { _t("Add") }
                 </AccessibleButton>
             </form>
@@ -99,11 +118,6 @@ export default class AliasSettings extends React.Component {
         return dict;
     }
 
-    isAliasValid(alias) {
-        // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
-        return (alias.match(/^#([^/:,]+?):(.+)$/) && encodeURI(alias) === alias);
-    }
-
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
@@ -139,38 +153,31 @@ export default class AliasSettings extends React.Component {
 
         const localDomain = MatrixClientPeg.get().getDomain();
         if (!alias.includes(':')) alias += ':' + localDomain;
-        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
-            MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
-                const localAliases = this.state.domainToAliases[localDomain] || [];
-                const domainAliases = Object.assign({}, this.state.domainToAliases);
-                domainAliases[localDomain] = [...localAliases, alias];
 
-                this.setState({
-                    domainToAliases: domainAliases,
-                    // Reset the add field
-                    newAlias: "",
-                });
+        MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
+            const localAliases = this.state.domainToAliases[localDomain] || [];
+            const domainAliases = Object.assign({}, this.state.domainToAliases);
+            domainAliases[localDomain] = [...localAliases, alias];
 
-                if (!this.state.canonicalAlias) {
-                    this.changeCanonicalAlias(alias);
-                }
-            }).catch((err) => {
-                console.error(err);
-                Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
-                    title: _t("Error creating alias"),
-                    description: _t(
-                        "There was an error creating that alias. It may not be allowed by the server " +
-                        "or a temporary failure occurred.",
-                    ),
-                });
+            this.setState({
+                domainToAliases: domainAliases,
+                // Reset the add field
+                newAlias: "",
             });
-        } else {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Invalid alias format', '', ErrorDialog, {
-                title: _t('Invalid alias format'),
-                description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
+
+            if (!this.state.canonicalAlias) {
+                this.changeCanonicalAlias(alias);
+            }
+        }).catch((err) => {
+            console.error(err);
+            Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
+                title: _t("Error creating alias"),
+                description: _t(
+                    "There was an error creating that alias. It may not be allowed by the server " +
+                    "or a temporary failure occurred.",
+                ),
             });
-        }
+        });
     };
 
     onLocalAliasDeleted = (index) => {

src/components/views/room_settings/RoomProfileSettings.js

@@ -98,6 +98,8 @@ export default class RoomProfileSettings extends React.Component {
             newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
             newState.originalAvatarUrl = newState.avatarUrl;
             newState.avatarFile = null;
+        } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
+            await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {url: undefined}, '');
         }
 
         if (this.state.originalTopic !== this.state.topic) {

src/components/views/rooms/LinkPreviewWidget.js

@@ -18,7 +18,8 @@ limitations under the License.
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import { linkifyElement } from '../../../HtmlUtils';
+import { AllHtmlEntities } from 'html-entities';
+import {linkifyElement} from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 
@@ -127,6 +128,10 @@ module.exports = createReactClass({
                   </div>;
         }
 
+        // The description includes &-encoded HTML entities, we decode those as React treats the thing as an
+        // opaque string. This does not allow any HTML to be injected into the DOM.
+        const description = AllHtmlEntities.decode(p["og:description"] || "");
+
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget" >
@@ -135,7 +140,7 @@ module.exports = createReactClass({
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
                     <div className="mx_LinkPreviewWidget_description" ref={this._description}>
-                        { p["og:description"] }
+                        { description }
                     </div>
                 </div>
                 <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>

src/components/views/rooms/SlateMessageComposer.js

@@ -1,485 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import { _t, _td } from '../../../languageHandler';
-import CallHandler from '../../../CallHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
-import dis from '../../../dispatcher';
-import RoomViewStore from '../../../stores/RoomViewStore';
-import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import Stickerpicker from './Stickerpicker';
-import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
-import ContentMessages from '../../../ContentMessages';
-
-import E2EIcon from './E2EIcon';
-
-const formatButtonList = [
-    _td("bold"),
-    _td("italic"),
-    _td("deleted"),
-    _td("underlined"),
-    _td("inline-code"),
-    _td("block-quote"),
-    _td("bulleted-list"),
-    _td("numbered-list"),
-];
-
-function ComposerAvatar(props) {
-    const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
-    return <div className="mx_MessageComposer_avatar">
-        <MemberStatusMessageAvatar member={props.me} width={24} height={24} />
-    </div>;
-}
-
-ComposerAvatar.propTypes = {
-    me: PropTypes.object.isRequired,
-}
-
-function CallButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    const onVoiceCallClick = (ev) => {
-        dis.dispatch({
-            action: 'place_call',
-            type: "voice",
-            room_id: props.roomId,
-        });
-    };
-
-    return <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_voicecall"
-        onClick={onVoiceCallClick}
-        title={_t('Voice call')}
-    />
-}
-
-CallButton.propTypes = {
-    roomId: PropTypes.string.isRequired
-}
-
-function VideoCallButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    const onCallClick = (ev) => {
-        dis.dispatch({
-            action: 'place_call',
-            type: ev.shiftKey ? "screensharing" : "video",
-            room_id: props.roomId,
-        });
-    };
-
-    return <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_videocall"
-        onClick={onCallClick}
-        title={_t('Video call')}
-    />;
-}
-
-VideoCallButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
-};
-
-function HangupButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    const onHangupClick = () => {
-        const call = CallHandler.getCallForRoom(props.roomId);
-        if (!call) {
-            return;
-        }
-        dis.dispatch({
-            action: 'hangup',
-            // hangup the call for this room, which may not be the room in props
-            // (e.g. conferences which will hangup the 1:1 room instead)
-            room_id: call.roomId,
-        });
-    };
-    return  <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
-        onClick={onHangupClick}
-        title={_t('Hangup')}
-    />;
-}
-
-HangupButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-function FormattingButton(props) {
-    const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-    return <AccessibleButton
-        element="img"
-        className="mx_MessageComposer_formatting"
-        alt={_t("Show Text Formatting Toolbar")}
-        title={_t("Show Text Formatting Toolbar")}
-        src={require("../../../../res/img/button-text-formatting.svg")}
-        style={{visibility: props.showFormatting ? 'hidden' : 'visible'}}
-        onClick={props.onClickHandler}
-    />;
-}
-
-FormattingButton.propTypes = {
-    showFormatting: PropTypes.bool.isRequired,
-    onClickHandler: PropTypes.func.isRequired,
-}
-
-class UploadButton extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    }
-    constructor(props) {
-        super(props);
-        this.onUploadClick = this.onUploadClick.bind(this);
-        this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
-
-        this._uploadInput = createRef();
-    }
-
-    onUploadClick(ev) {
-        if (MatrixClientPeg.get().isGuest()) {
-            dis.dispatch({action: 'require_registration'});
-            return;
-        }
-        this._uploadInput.current.click();
-    }
-
-    onUploadFileInputChange(ev) {
-        if (ev.target.files.length === 0) return;
-
-        // take a copy so we can safely reset the value of the form control
-        // (Note it is a FileList: we can't use slice or sesnible iteration).
-        const tfiles = [];
-        for (let i = 0; i < ev.target.files.length; ++i) {
-            tfiles.push(ev.target.files[i]);
-        }
-
-        ContentMessages.sharedInstance().sendContentListToRoom(
-            tfiles, this.props.roomId, MatrixClientPeg.get(),
-        );
-
-        // This is the onChange handler for a file form control, but we're
-        // not keeping any state, so reset the value of the form control
-        // to empty.
-        // NB. we need to set 'value': the 'files' property is immutable.
-        ev.target.value = '';
-    }
-
-    render() {
-        const uploadInputStyle = {display: 'none'};
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (
-            <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_upload"
-                onClick={this.onUploadClick}
-                title={_t('Upload file')}
-            >
-                <input ref={this._uploadInput} type="file"
-                    style={uploadInputStyle}
-                    multiple
-                    onChange={this.onUploadFileInputChange}
-                />
-            </AccessibleButton>
-        );
-    }
-}
-
-export default class SlateMessageComposer extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onAutocompleteConfirm = this._onAutocompleteConfirm.bind(this);
-        this.onToggleFormattingClicked = this.onToggleFormattingClicked.bind(this);
-        this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
-        this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this.onEvent = this.onEvent.bind(this);
-        this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
-        this._onTombstoneClick = this._onTombstoneClick.bind(this);
-        this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-        this.renderFormatBar = this.renderFormatBar.bind(this);
-
-        this.state = {
-            inputState: {
-                marks: [],
-                blockType: null,
-                isRichTextEnabled: SettingsStore.getValue('MessageComposerInput.isRichTextEnabled'),
-            },
-            showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
-            isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
-            tombstone: this._getRoomTombstone(),
-            canSendMessages: this.props.room.maySendMessage(),
-        };
-    }
-
-    componentDidMount() {
-        // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
-        // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
-        // marked as encrypted.
-        // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
-        MatrixClientPeg.get().on("event", this.onEvent);
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
-        this._waitForOwnMember();
-    }
-
-    _waitForOwnMember() {
-        // if we have the member already, do that
-        const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
-        if (me) {
-            this.setState({me});
-            return;
-        }
-        // Otherwise, wait for member loading to finish and then update the member for the avatar.
-        // The members should already be loading, and loadMembersIfNeeded
-        // will return the promise for the existing operation
-        this.props.room.loadMembersIfNeeded().then(() => {
-            const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
-            this.setState({me});
-        });
-    }
-
-    componentWillUnmount() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("event", this.onEvent);
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
-        }
-        if (this._roomStoreToken) {
-            this._roomStoreToken.remove();
-        }
-    }
-
-    onEvent(event) {
-        if (event.getType() !== 'm.room.encryption') return;
-        if (event.getRoomId() !== this.props.room.roomId) return;
-        this.forceUpdate();
-    }
-
-    _onRoomStateEvents(ev, state) {
-        if (ev.getRoomId() !== this.props.room.roomId) return;
-
-        if (ev.getType() === 'm.room.tombstone') {
-            this.setState({tombstone: this._getRoomTombstone()});
-        }
-        if (ev.getType() === 'm.room.power_levels') {
-            this.setState({canSendMessages: this.props.room.maySendMessage()});
-        }
-    }
-
-    _getRoomTombstone() {
-        return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
-    }
-
-    _onRoomViewStoreUpdate() {
-        const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
-        if (this.state.isQuoting === isQuoting) return;
-        this.setState({ isQuoting });
-    }
-
-
-    onInputStateChanged(inputState) {
-        // Merge the new input state with old to support partial updates
-        inputState = Object.assign({}, this.state.inputState, inputState);
-        this.setState({inputState});
-    }
-
-    _onAutocompleteConfirm(range, completion) {
-        if (this.messageComposerInput) {
-            this.messageComposerInput.setDisplayedCompletion(range, completion);
-        }
-    }
-
-    onFormatButtonClicked(name, event) {
-        event.preventDefault();
-        this.messageComposerInput.onFormatButtonClicked(name, event);
-    }
-
-    onToggleFormattingClicked() {
-        SettingsStore.setValue("MessageComposer.showFormatting", null, SettingLevel.DEVICE, !this.state.showFormatting);
-        this.setState({showFormatting: !this.state.showFormatting});
-    }
-
-    onToggleMarkdownClicked(e) {
-        e.preventDefault(); // don't steal focus from the editor!
-        this.messageComposerInput.enableRichtext(!this.state.inputState.isRichTextEnabled);
-    }
-
-    _onTombstoneClick(ev) {
-        ev.preventDefault();
-
-        const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
-        const replacementRoom = MatrixClientPeg.get().getRoom(replacementRoomId);
-        let createEventId = null;
-        if (replacementRoom) {
-            const createEvent = replacementRoom.currentState.getStateEvents('m.room.create', '');
-            if (createEvent && createEvent.getId()) createEventId = createEvent.getId();
-        }
-
-        const viaServers = [this.state.tombstone.getSender().split(':').splice(1).join(':')];
-        dis.dispatch({
-            action: 'view_room',
-            highlighted: true,
-            event_id: createEventId,
-            room_id: replacementRoomId,
-            auto_join: true,
-
-            // Try to join via the server that sent the event. This converts @something:example.org
-            // into a server domain by splitting on colons and ignoring the first entry ("@something").
-            via_servers: viaServers,
-            opts: {
-                // These are passed down to the js-sdk's /join call
-                viaServers: viaServers,
-            },
-        });
-    }
-
-    renderPlaceholderText() {
-        const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
-        if (this.state.isQuoting) {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted reply…');
-            } else {
-                return _t('Send a reply (unencrypted)…');
-            }
-        } else {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted message…');
-            } else {
-                return _t('Send a message (unencrypted)…');
-            }
-        }
-    }
-
-    renderFormatBar() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const {marks, blockType} = this.state.inputState;
-        const formatButtons = formatButtonList.map((name) => {
-            // special-case to match the md serializer and the special-case in MessageComposerInput.js
-            const markName = name === 'inline-code' ? 'code' : name;
-            const active = marks.some(mark => mark.type === markName) || blockType === name;
-            const suffix = active ? '-on' : '';
-            const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
-            const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
-            return (
-                <img className={className}
-                    title={_t(name)}
-                    onMouseDown={onFormatButtonClicked}
-                    key={name}
-                    src={require(`../../../../res/img/button-text-${name}${suffix}.svg`)}
-                    height="17"
-                />
-            );
-        })
-
-        return (
-            <div className="mx_MessageComposer_formatbar_wrapper">
-                <div className="mx_MessageComposer_formatbar">
-                { formatButtons }
-                <div style={{ flex: 1 }}></div>
-                <AccessibleButton
-                    className="mx_MessageComposer_formatbar_markdown mx_MessageComposer_markdownDisabled"
-                    onClick={this.onToggleMarkdownClicked}
-                    title={_t("Markdown is disabled")}
-                />
-                <AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
-                    onClick={this.onToggleFormattingClicked}
-                    className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
-                    src={require("../../../../res/img/icon-text-cancel.svg")}
-                />
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const controls = [
-            this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
-            this.props.e2eStatus ? <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> : null,
-        ];
-
-        if (!this.state.tombstone && this.state.canSendMessages) {
-            // This also currently includes the call buttons. Really we should
-            // check separately for whether we can call, but this is slightly
-            // complex because of conference calls.
-
-            const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
-            const showFormattingButton = this.state.inputState.isRichTextEnabled;
-            const callInProgress = this.props.callState && this.props.callState !== 'ended';
-
-            controls.push(
-                <MessageComposerInput
-                    ref={(c) => this.messageComposerInput = c}
-                    key="controls_input"
-                    room={this.props.room}
-                    placeholder={this.renderPlaceholderText()}
-                    onInputStateChanged={this.onInputStateChanged}
-                    permalinkCreator={this.props.permalinkCreator} />,
-                showFormattingButton ? <FormattingButton key="controls_formatting"
-                    showFormatting={this.state.showFormatting} onClickHandler={this.onToggleFormattingClicked} /> : null,
-                <Stickerpicker key='stickerpicker_controls_button' room={this.props.room} />,
-                <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
-                callInProgress ? <HangupButton key="controls_hangup" roomId={this.props.room.roomId} /> : null,
-                callInProgress ? null : <CallButton key="controls_call" roomId={this.props.room.roomId} />,
-                callInProgress ? null : <VideoCallButton key="controls_videocall" roomId={this.props.room.roomId} />,
-            );
-        } else if (this.state.tombstone) {
-            const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
-
-            const continuesLink = replacementRoomId ? (
-                <a href={makeRoomPermalink(replacementRoomId)}
-                    className="mx_MessageComposer_roomReplaced_link"
-                    onClick={this._onTombstoneClick}
-                >
-                    {_t("The conversation continues here.")}
-                </a>
-            ) : '';
-
-            controls.push(<div className="mx_MessageComposer_replaced_wrapper">
-                <div className="mx_MessageComposer_replaced_valign">
-                    <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
-                    <span className="mx_MessageComposer_roomReplaced_header">
-                        {_t("This room has been replaced and is no longer active.")}
-                    </span><br />
-                    { continuesLink }
-                </div>
-            </div>);
-        } else {
-            controls.push(
-                <div key="controls_error" className="mx_MessageComposer_noperm_error">
-                    { _t('You do not have permission to post to this room') }
-                </div>,
-            );
-        }
-
-        const showFormatBar = this.state.showFormatting && this.state.inputState.isRichTextEnabled;
-
-        return (
-            <div className="mx_MessageComposer">
-                <div className="mx_MessageComposer_wrapper">
-                    <div className="mx_MessageComposer_row">
-                        { controls }
-                    </div>
-                </div>
-                { showFormatBar ? this.renderFormatBar() : null }
-            </div>
-        );
-    }
-}
-
-SlateMessageComposer.propTypes = {
-    // js-sdk Room object
-    room: PropTypes.object.isRequired,
-
-    // string representing the current voip call state
-    callState: PropTypes.string,
-
-    // string representing the current room app drawer state
-    showApps: PropTypes.bool
-};

src/components/views/settings/KeyBackupPanel.js

@@ -21,7 +21,7 @@ import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import SettingsStore from '../../../../lib/settings/SettingsStore';
+import SettingsStore from '../../../settings/SettingsStore';
 
 export default class KeyBackupPanel extends React.PureComponent {
     constructor(props) {

src/components/views/settings/ProfileSettings.js

@@ -88,6 +88,8 @@ export default class ProfileSettings extends React.Component {
             newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
             newState.originalAvatarUrl = newState.avatarUrl;
             newState.avatarFile = null;
+        } else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
+            await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
         }
 
         this.setState(newState);

src/components/views/settings/tabs/room/BridgeSettingsTab.js

@@ -0,0 +1,166 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {_t} from "../../../../../languageHandler";
+import MatrixClientPeg from "../../../../../MatrixClientPeg";
+import Pill from "../../../elements/Pill";
+import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
+import BaseAvatar from "../../../avatars/BaseAvatar";
+import { ContentRepo } from "matrix-js-sdk";
+
+const BRIDGE_EVENT_TYPES = [
+    "uk.half-shot.bridge",
+    // m.bridge
+];
+
+export default class BridgeSettingsTab extends React.Component {
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+    };
+
+    _renderBridgeCard(event, room) {
+        const content = event.getContent();
+        if (!content || !content.channel || !content.protocol) {
+            return null;
+        }
+        const { channel, network } = content;
+        const protocolName = content.protocol.displayname || content.protocol.id;
+        const channelName = channel.displayname || channel.id;
+        const networkName = network ? network.displayname || network.id : protocolName;
+
+        let creator = null;
+        if (content.creator) {
+            creator = <p> { _t("This bridge was provisioned by <user />", {}, {
+                    user: <Pill
+                        type={Pill.TYPE_USER_MENTION}
+                        room={room}
+                        url={makeUserPermalink(content.creator)}
+                        shouldShowPillAvatar={true}
+                    />,
+                })}</p>;
+        }
+
+        const bot = (<p> {_t("This bridge is managed by <user />.", {}, {
+            user: <Pill
+                type={Pill.TYPE_USER_MENTION}
+                room={room}
+                url={makeUserPermalink(event.getSender())}
+                shouldShowPillAvatar={true}
+                />,
+        })} </p>);
+        let channelLink = channelName;
+        if (channel.external_url) {
+            channelLink = <a target="_blank" href={channel.external_url} rel="noopener">{channelName}</a>;
+        }
+
+        let networkLink = networkName;
+        if (network && network.external_url) {
+            networkLink = <a target="_blank" href={network.external_url} rel="noopener">{networkName}</a>;
+        }
+
+        const chanAndNetworkInfo = (
+            _t("Bridged into <channelLink /> <networkLink />, on <protocolName />", {}, {
+                channelLink,
+                networkLink,
+                protocolName,
+            })
+        );
+
+        let networkIcon = null;
+        if (networkName && network.avatar) {
+            const avatarUrl = ContentRepo.getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                network.avatar, 32, 32, "crop",
+            );
+            networkIcon = <BaseAvatar
+                width={32}
+                height={32}
+                resizeMethod='crop'
+                name={ networkName }
+                idName={ networkName }
+                url={ avatarUrl }
+            />;
+        }
+
+        let channelIcon = null;
+        if (channel.avatar) {
+            const avatarUrl = ContentRepo.getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                channel.avatar, 32, 32, "crop",
+            );
+            channelIcon = <BaseAvatar
+                width={32}
+                height={32}
+                resizeMethod='crop'
+                name={ networkName }
+                idName={ networkName }
+                url={ avatarUrl }
+            />;
+        }
+
+        const heading = _t("Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />", { }, {
+            channelIcon,
+            channelName,
+            networkName,
+            networkIcon,
+        });
+
+        return (<li key={event.stateKey}>
+            <div>
+                <h3>{heading}</h3>
+                <p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
+                <details>
+                    {creator}
+                    {bot}
+                    <p>{chanAndNetworkInfo}</p>
+                </details>
+            </div>
+        </li>);
+    }
+
+    static getBridgeStateEvents(roomId) {
+        const client = MatrixClientPeg.get();
+        const roomState = (client.getRoom(roomId)).currentState;
+
+        const bridgeEvents = Array.concat(...BRIDGE_EVENT_TYPES.map((typeName) =>
+            Object.values(roomState.events[typeName] || {}),
+        ));
+
+        return bridgeEvents;
+    }
+
+    render() {
+        // This settings tab will only be invoked if the following function returns more
+        // than 0 events, so no validation is needed at this stage.
+        const bridgeEvents = BridgeSettingsTab.getBridgeStateEvents(this.props.roomId);
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(this.props.roomId);
+
+        return (
+            <div className="mx_SettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <p>{ _t("Below is a list of bridges connected to this room.") }</p>
+                    <ul className="mx_RoomSettingsDialog_BridgeList">
+                        { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -26,7 +26,6 @@ import PlatformPeg from "../../../../../PlatformPeg";
 
 export default class PreferencesUserSettingsTab extends React.Component {
     static COMPOSER_SETTINGS = [
-        'useCiderComposer',
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.suggestEmoji',
         'sendTypingNotifications',