Merge branch 'develop' into luke/fix-ugly-integ-button

src/components/views/avatars/BaseAvatar.js

@@ -14,10 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-var AvatarLogic = require("../../../Avatar");
+import React from 'react';
+import AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import classnames from 'classnames';
+import { GroupMemberType } from '../../../groups';
 
 /*
  * A dialog for confirming an operation on another user.
@@ -30,7 +31,10 @@ import classnames from 'classnames';
 export default React.createClass({
     displayName: 'ConfirmUserActionDialog',
     propTypes: {
-        member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
+        // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
+        member: React.PropTypes.object,
+        // group member object. Supply either this or 'member'
+        groupMember: GroupMemberType,
         action: React.PropTypes.string.isRequired, // eg. 'Ban'
 
         // Whether to display a text field for a reason
@@ -69,6 +73,7 @@ export default React.createClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
         const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
         const confirmButtonClass = classnames({
@@ -91,6 +96,20 @@ export default React.createClass({
             );
         }
 
+        let avatar;
+        let name;
+        let userId;
+        if (this.props.member) {
+            avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
+            name = this.props.member.name;
+            userId = this.props.member.userId;
+        } else {
+            // we don't get this info from the API yet
+            avatar = <BaseAvatar name={this.props.groupMember.userId} width={48} height={48} />;
+            name = this.props.groupMember.userId;
+            userId = this.props.groupMember.userId;
+        }
+
         return (
             <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
@@ -98,10 +117,10 @@ export default React.createClass({
             >
                 <div className="mx_Dialog_content">
                     <div className="mx_ConfirmUserActionDialog_avatar">
-                        <MemberAvatar member={this.props.member} width={48} height={48} />
+                        {avatar}
                     </div>
-                    <div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
-                    <div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
+                    <div className="mx_ConfirmUserActionDialog_name">{name}</div>
+                    <div className="mx_ConfirmUserActionDialog_userId">{userId}</div>
                 </div>
                 {reasonBox}
                 <div className="mx_Dialog_buttons">

src/components/views/dialogs/QuestionDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 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.
@@ -17,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classnames from 'classnames';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
@@ -25,6 +27,7 @@ export default React.createClass({
         description: React.PropTypes.node,
         extraButtons: React.PropTypes.node,
         button: React.PropTypes.string,
+        danger: React.PropTypes.bool,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,
     },
@@ -36,6 +39,7 @@ export default React.createClass({
             extraButtons: null,
             focus: true,
             hasCancelButton: true,
+            danger: false,
         };
     },
 
@@ -54,6 +58,10 @@ export default React.createClass({
                 {_t("Cancel")}
             </button>
         ) : null;
+        const buttonClasses = classnames({
+            mx_Dialog_primary: true,
+            danger: this.props.danger,
+        });
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
@@ -63,7 +71,7 @@ export default React.createClass({
                     {this.props.description}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
+                    <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
                         {this.props.button || _t('OK')}
                     </button>
                     {this.props.extraButtons}

src/components/views/elements/Flair.js

@@ -0,0 +1,210 @@
+/*
+ Copyright 2017 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.
+ */
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MatrixClient} from 'matrix-js-sdk';
+import UserSettingsStore from '../../../UserSettingsStore';
+import Promise from 'bluebird';
+
+const BULK_REQUEST_DEBOUNCE_MS = 200;
+
+// Does the server support groups? Assume yes until we receive M_UNRECOGNIZED.
+// If true, flair can function and we should keep sending requests for groups and avatars.
+let groupSupport = true;
+
+// TODO: Cache-busting based on time. (The server won't inform us of membership changes.)
+// This applies to userGroups and groupProfiles. We can provide a slightly better UX by
+// cache-busting when the current user joins/leaves a group.
+const userGroups = {
+    // $userId: ['+group1:domain', '+group2:domain', ...]
+};
+
+const groupProfiles = {
+//  $groupId: {
+//      avatar_url: 'mxc://...'
+//  }
+};
+
+// Represents all unsettled promises to retrieve the groups for each userId. When a promise
+// is settled, it is deleted from this object.
+const usersPending = {
+//  $userId: {
+//      prom: Promise
+//      resolve: () => {}
+//      reject: () => {}
+//  }
+};
+
+let debounceTimeoutID;
+function getPublicisedGroupsCached(matrixClient, userId) {
+    if (userGroups[userId]) {
+        return Promise.resolve(userGroups[userId]);
+    }
+
+    // Bulk lookup ongoing, return promise to resolve/reject
+    if (usersPending[userId]) {
+        return usersPending[userId].prom;
+    }
+
+    usersPending[userId] = {};
+    usersPending[userId].prom = new Promise((resolve, reject) => {
+        usersPending[userId].resolve = resolve;
+        usersPending[userId].reject = reject;
+    }).then((groups) => {
+        userGroups[userId] = groups;
+        // TODO: Reset cache at this point
+        return userGroups[userId];
+    }).catch((err) => {
+        throw err;
+    }).finally(() => {
+        delete usersPending[userId];
+    });
+
+    // This debounce will allow consecutive requests for the public groups of users that
+    // are sent in intervals of < BULK_REQUEST_DEBOUNCE_MS to be batched and only requested
+    // when no more requests are received within the next BULK_REQUEST_DEBOUNCE_MS. The naive
+    // implementation would do a request that only requested the groups for `userId`, leading
+    // to a worst and best case of 1 user per request. This implementation's worst is still
+    // 1 user per request but only if the requests are > BULK_REQUEST_DEBOUNCE_MS apart and the
+    // best case is N users per request.
+    //
+    // This is to reduce the number of requests made whilst trading off latency when viewing
+    // a Flair component.
+    if (debounceTimeoutID) clearTimeout(debounceTimeoutID);
+    debounceTimeoutID = setTimeout(() => {
+        batchedGetPublicGroups(matrixClient);
+    }, BULK_REQUEST_DEBOUNCE_MS);
+
+    return usersPending[userId].prom;
+}
+
+async function batchedGetPublicGroups(matrixClient) {
+    // Take the userIds from the keys of usersPending
+    const usersInFlight = Object.keys(usersPending);
+    let resp = {
+        users: [],
+    };
+    try {
+        resp = await matrixClient.getPublicisedGroups(usersInFlight);
+    } catch (err) {
+        // Propagate the same error to all usersInFlight
+        usersInFlight.forEach((userId) => {
+            usersPending[userId].reject(err);
+        });
+        return;
+    }
+    const updatedUserGroups = resp.users;
+    usersInFlight.forEach((userId) => {
+        usersPending[userId].resolve(updatedUserGroups[userId] || []);
+    });
+}
+
+async function getGroupProfileCached(matrixClient, groupId) {
+    if (groupProfiles[groupId]) {
+        return groupProfiles[groupId];
+    }
+
+    groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId);
+    return groupProfiles[groupId];
+}
+
+export default class Flair extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            avatarUrls: [],
+        };
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+        if (UserSettingsStore.isFeatureEnabled('feature_flair') && groupSupport) {
+            this._generateAvatars();
+        }
+    }
+
+    async _getAvatarUrls(groups) {
+        const profiles = [];
+        for (const groupId of groups) {
+            let groupProfile = null;
+            try {
+                groupProfile = await getGroupProfileCached(this.context.matrixClient, groupId);
+            } catch (err) {
+                console.error('Could not get profile for group', groupId, err);
+            }
+            profiles.push(groupProfile);
+        }
+
+        const avatarUrls = profiles.filter((p) => p !== null).map((p) => p.avatar_url);
+        return avatarUrls;
+    }
+
+    async _generateAvatars() {
+        let groups;
+        try {
+            groups = await getPublicisedGroupsCached(this.context.matrixClient, this.props.userId);
+        } catch (err) {
+            // Indicate whether the homeserver supports groups
+            if (err.errcode === 'M_UNRECOGNIZED') {
+                console.warn('Cannot display flair, server does not support groups');
+                groupSupport = false;
+                // Return silently to avoid spamming for non-supporting servers
+                return;
+            }
+            console.error('Could not get groups for user', this.props.userId, err);
+        }
+        if (!groups || groups.length === 0) {
+            return;
+        }
+        const avatarUrls = await this._getAvatarUrls(groups);
+        if (!this.unmounted) {
+            this.setState({avatarUrls});
+        }
+    }
+
+    render() {
+        if (this.state.avatarUrls.length === 0) {
+            return <div />;
+        }
+        const avatars = this.state.avatarUrls.map((avatarUrl, index) => {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 14, 14, 'scale', false);
+            return <img key={index} src={httpUrl} width="14px" height="14px"/>;
+        });
+        return (
+            <span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}>
+                {avatars}
+            </span>
+        );
+    }
+}
+
+Flair.propTypes = {
+    userId: PropTypes.string,
+};
+
+// TODO: We've decided that all components should follow this pattern, which means removing withMatrixClient and using
+// this.context.matrixClient everywhere instead of this.props.matrixClient.
+// See https://github.com/vector-im/riot-web/issues/4951.
+Flair.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};

src/components/views/groups/GroupInviteTile.js

@@ -0,0 +1,70 @@
+/*
+Copyright 2017 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 from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
+
+export default React.createClass({
+    displayName: 'GroupInviteTile',
+
+    propTypes: {
+        group: PropTypes.object.isRequired,
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.group.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        const av = (
+            <BaseAvatar name={this.props.group.name} width={24} height={24}
+                url={this.props.group.avatarUrl}
+            />
+        );
+
+        const label = <EmojiText
+            element="div"
+            title={this.props.group.name}
+            className="mx_GroupInviteTile_name"
+            dir="auto"
+        >
+            {this.props.group.name}
+        </EmojiText>;
+
+        const badge = <div className="mx_GroupInviteTile_badge">!</div>;
+
+        return (
+            <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
+                <div className="mx_GroupInviteTile_avatarContainer">
+                    {av}
+                </div>
+                <div className="mx_GroupInviteTile_nameContainer">
+                    {label}
+                    {badge}
+                </div>
+            </AccessibleButton>
+        );
+    },
+});

src/components/views/groups/GroupMemberInfo.js

@@ -0,0 +1,186 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 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 PropTypes from 'prop-types';
+import React from 'react';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { GroupMemberType } from '../../../groups';
+import { groupMemberFromApiObject } from '../../../groups';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+
+module.exports = withMatrixClient(React.createClass({
+    displayName: 'GroupMemberInfo',
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        groupId: PropTypes.string,
+        groupMember: GroupMemberType,
+    },
+
+    getInitialState: function() {
+        return {
+            fetching: false,
+            removingUser: false,
+            groupMembers: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._fetchMembers();
+    },
+
+    _fetchMembers: function() {
+        this.setState({fetching: true});
+        this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
+            this.setState({
+                groupMembers: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group groupMember list: ", e);
+        });
+    },
+
+    _onKick: function() {
+        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        Modal.createDialog(ConfirmUserActionDialog, {
+            groupMember: this.props.groupMember,
+            action: _t('Remove from group'),
+            danger: true,
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                this.setState({removingUser: true});
+                this.props.matrixClient.removeUserFromGroup(
+                    this.props.groupId, this.props.groupMember.userId,
+                ).then(() => {
+                    // return to the user list
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null,
+                    });
+                }).catch((e) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: _t('Failed to remove user from group'),
+                    });
+                }).finally(() => {
+                    this.setState({removingUser: false});
+                });
+            },
+        });
+    },
+
+    _onCancel: function(e) {
+        // Go back to the user list
+        dis.dispatch({
+            action: "view_user",
+            member: null,
+        });
+    },
+
+    onRoomTileClick(roomId) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+        });
+    },
+
+    render: function() {
+        if (this.state.fetching || this.state.removingUser) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+        if (!this.state.groupMembers) return null;
+
+        const targetIsInGroup = this.state.groupMembers.some((m) => {
+            return m.userId === this.props.groupMember.userId;
+        });
+
+        let kickButton;
+        let adminButton;
+
+        if (targetIsInGroup) {
+            kickButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this._onKick}>
+                    {_t('Remove from group')}
+                </AccessibleButton>
+            );
+
+            // No make/revoke admin API yet
+            /*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
+                {giveOpLabel}
+            </AccessibleButton>;*/
+        }
+
+        let adminTools;
+        if (kickButton || adminButton) {
+            adminTools =
+                <div className="mx_MemberInfo_adminTools">
+                    <h3>{_t("Admin Tools")}</h3>
+
+                    <div className="mx_MemberInfo_buttons">
+                        {kickButton}
+                        {adminButton}
+                    </div>
+                </div>;
+        }
+
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const avatar = (
+            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36} />
+        );
+
+        const groupMemberName = this.props.groupMember.userId;
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbar autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
+                        <img src="img/cancel.svg" width="18" height="18"/>
+                    </AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        {avatar}
+                    </div>
+
+                    <EmojiText element="h2">{groupMemberName}</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.groupMember.userId }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+}));

src/components/views/groups/GroupMemberList.js

@@ -0,0 +1,154 @@
+/*
+Copyright 2017 Vector Creations Ltd.
+Copyright 2017 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 from 'react';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import { groupMemberFromApiObject } from '../../../groups';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+import PropTypes from 'prop-types';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+
+const INITIAL_LOAD_NUM_MEMBERS = 30;
+
+export default withMatrixClient(React.createClass({
+    displayName: 'GroupMemberList',
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            fetching: false,
+            members: null,
+            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._fetchMembers();
+    },
+
+    _fetchMembers: function() {
+        this.setState({fetching: true});
+        this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
+            this.setState({
+                members: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group member list: " + e);
+        });
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        const EntityTile = sdk.getComponent("rooms.EntityTile");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={this._showFullMemberList} />
+        );
+    },
+
+    _showFullMemberList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+    },
+
+    onSearchQueryChanged: function(ev) {
+        this.setState({ searchQuery: ev.target.value });
+    },
+
+    makeGroupMemberTiles: function(query) {
+        const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
+        query = (query || "").toLowerCase();
+
+        let memberList = this.state.members;
+        if (query) {
+            memberList = memberList.filter((m) => {
+                // TODO: add this when we have this info from the API
+                //const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
+                const matchesId = m.userId.toLowerCase().includes(query);
+
+                if (/*!matchesName &&*/ !matchesId) {
+                    return false;
+                }
+
+                return true;
+            });
+        }
+
+        memberList = memberList.map((m) => {
+            return (
+                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
+            );
+        });
+
+        memberList.sort((a, b) => {
+            // TODO: should put admins at the top: we don't yet have that info
+            if (a < b) {
+                return -1;
+            } else if (a > b) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+
+        return memberList;
+    },
+
+    render: function() {
+        if (this.state.fetching) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        } else if (this.state.members === null) {
+            return null;
+        }
+
+        const inputBox = (
+            <form autoComplete="off">
+                <input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={ _t('Filter group members') } />
+            </form>
+        );
+
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return (
+            <div className="mx_MemberList">
+                { inputBox }
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+                            createOverflowElement={this._createOverflowTile}>
+                        {this.makeGroupMemberTiles(this.state.searchQuery)}
+                    </TruncatedList>
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+}));

src/components/views/groups/GroupMemberTile.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 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 from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { GroupMemberType } from '../../../groups';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+
+export default withMatrixClient(React.createClass({
+    displayName: 'GroupMemberTile',
+
+    propTypes: {
+        matrixClient: PropTypes.object,
+        groupId: PropTypes.string.isRequired,
+        member: GroupMemberType.isRequired,
+    },
+
+    getInitialState: function() {
+        return {};
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group_user',
+            member: this.props.member,
+            groupId: this.props.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EntityTile = sdk.getComponent('rooms.EntityTile');
+
+        const name = this.props.member.userId;
+
+        const av = (
+            <BaseAvatar name={this.props.member.userId} width={36} height={36} />
+        );
+
+        return (
+            <EntityTile presenceState="online"
+                avatarJsx={av} onClick={this.onClick}
+                name={name} powerLevel={0} suppressOnHover={true}
+            />
+        );
+    },
+}));

src/components/views/messages/SenderProfile.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import sdk from '../../../index';
+import Flair from '../elements/Flair.js';
 
 export default function SenderProfile(props) {
     const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -30,8 +31,11 @@ export default function SenderProfile(props) {
     }
 
     return (
-        <EmojiText className="mx_SenderProfile" dir="auto"
-              onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
+        <div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
+            <EmojiText>{name || ''}</EmojiText>
+            {props.enableFlair ? <Flair userId={mxEvent.getSender()} /> : null}
+            {props.aux ? <EmojiText> {props.aux}</EmojiText> : null}
+        </div>
     );
 }
 

src/components/views/rooms/EventTile.js

@@ -508,10 +508,10 @@ module.exports = withMatrixClient(React.createClass({
                 if (msgtype === 'm.image') aux = _t('sent an image');
                 else if (msgtype === 'm.video') aux = _t('sent a video');
                 else if (msgtype === 'm.file') aux = _t('uploaded a file');
-                sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} aux={aux} />;
+                sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} enableFlair={!aux} aux={aux} />;
             }
             else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} />;
+                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={true} />;
             }
         }
 

src/components/views/rooms/MemberInfo.js

@@ -751,7 +751,7 @@ module.exports = withMatrixClient(React.createClass({
         if (kickButton || banButton || muteButton || giveModButton) {
             adminTools =
                 <div>
-                    <h3>{_t("Admin tools")}</h3>
+                    <h3>{_t("Admin Tools")}</h3>
 
                     <div className="mx_MemberInfo_buttons">
                         {muteButton}

src/components/views/rooms/MemberList.js

@@ -26,7 +26,6 @@ var sdk = require('../../../index');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var rate_limited_func = require('../../../ratelimitedfunc');
 var CallHandler = require("../../../CallHandler");
-var Invite = require("../../../Invite");
 
 var INITIAL_LOAD_NUM_MEMBERS = 30;
 

src/components/views/rooms/RoomList.js

@@ -550,8 +550,24 @@ module.exports = React.createClass({
         }
     },
 
+    _makeGroupInviteTiles() {
+        const ret = [];
+
+        const GroupInviteTile = sdk.getComponent('groups.GroupInviteTile');
+        for (const group of MatrixClientPeg.get().getGroups()) {
+            if (group.myMembership !== 'invite') continue;
+
+            ret.push(<GroupInviteTile key={group.groupId} group={group} />);
+        }
+
+        return ret;
+    },
+
     render: function() {
-        var RoomSubList = sdk.getComponent('structures.RoomSubList');
+        const RoomSubList = sdk.getComponent('structures.RoomSubList');
+
+        const inviteSectionExtraTiles = this._makeGroupInviteTiles();
+
         var self = this;
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
@@ -567,7 +583,9 @@ module.exports = React.createClass({
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
                              onHeaderClick={ self.onSubListHeaderClick }
-                             onShowMoreRooms={ self.onShowMoreRooms } />
+                             onShowMoreRooms={ self.onShowMoreRooms }
+                             extraTiles={ inviteSectionExtraTiles }
+                />
 
                 <RoomSubList list={ self.state.lists['m.favourite'] }
                              label={ _t('Favourites') }