Merge pull request #4830 from vector-im/dbkr/group_userlist

Group Membership UI

src/components/structures/RightPanel.js

@@ -1,5 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+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.
@@ -14,8 +16,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import sdk from 'matrix-react-sdk';
@@ -26,26 +26,31 @@ import Analytics from 'matrix-react-sdk/lib/Analytics';
 import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
 import Modal from 'matrix-react-sdk/lib/Modal';
 import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+import { showGroupInviteDialog } from 'matrix-react-sdk/lib/GroupInvite';
 
 module.exports = React.createClass({
     displayName: 'RightPanel',
 
     propTypes: {
-        // TODO: This should not be a prop, it should be received from the RoomViewStore
+        // TODO: We're trying to move away from these being props, but we need to know
+        // whether we should be displaying a room or group member list
         roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+        groupId: React.PropTypes.string, // if showing panels for a given group, this is set
         collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
     },
 
     Phase: {
-        MemberList: 'MemberList',
+        RoomMemberList: 'RoomMemberList',
+        GroupMemberList: 'GroupMemberList',
         FilePanel: 'FilePanel',
         NotificationPanel: 'NotificationPanel',
-        MemberInfo: 'MemberInfo',
+        RoomMemberInfo: 'RoomMemberInfo',
+        GroupMemberInfo: 'GroupMemberInfo',
     },
 
     componentWillMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-        var cli = MatrixClientPeg.get();
+        const cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
     },
 
@@ -57,14 +62,20 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return {
-            phase: this.Phase.MemberList
-        };
+        if (this.props.groupId) {
+            return {
+                phase: this.Phase.GroupMemberList,
+            };
+        } else {
+            return {
+                phase: this.Phase.RoomMemberList,
+            };
+        }
     },
 
     onMemberListButtonClick: function() {
         Analytics.trackEvent('Right Panel', 'Member List Button', 'click');
-        this.setState({ phase: this.Phase.MemberList });
+        this.setState({ phase: this.Phase.RoomMemberList });
     },
 
     onFileListButtonClick: function() {
@@ -89,19 +100,23 @@ module.exports = React.createClass({
             return;
         }
 
-        // call ChatInviteDialog
-        dis.dispatch({
-            action: 'view_invite',
-            roomId: this.props.roomId,
-        });
+        if (this.state.phase === this.Phase.GroupMemberList) {
+            showGroupInviteDialog(this.props.groupId);
+        } else {
+            // call UserPickerDialog
+            dis.dispatch({
+                action: 'view_invite',
+                roomId: this.props.roomId,
+            });
+        }
     },
 
     onRoomStateMember: function(ev, state, member) {
         // redraw the badge on the membership list
-        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
+        if (this.state.phase == this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
             this._delayedUpdate();
         }
-        else if (this.state.phase === this.Phase.MemberInfo && member.roomId === this.props.roomId &&
+        else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
             this._delayedUpdate();
@@ -119,39 +134,55 @@ module.exports = React.createClass({
             });
             if (payload.member) {
                 this.setState({
-                    phase: this.Phase.MemberInfo,
+                    phase: this.Phase.RoomMemberInfo,
                     member: payload.member,
                 });
+            } else {
+                if (this.props.roomId) {
+                    this.setState({
+                        phase: this.Phase.RoomMemberList
+                    });
+                } else if (this.props.groupId) {
+                    this.setState({
+                        phase: this.Phase.GroupMemberList,
+                        groupId: payload.groupId,
+                        member: payload.member,
+                    });
+                }
             }
-            else {
-                this.setState({
-                    phase: this.Phase.MemberList
-                });
-            }
-        }
-        else if (payload.action === "view_room") {
-            if (this.state.phase === this.Phase.MemberInfo) {
-                this.setState({
-                    phase: this.Phase.MemberList
-                });
-            }
+        } else if (payload.action === "view_group") {
+            this.setState({
+                phase: this.Phase.GroupMemberList,
+                groupId: payload.groupId,
+                member: null,
+            });
+        } else if (payload.action === "view_group_user") {
+            this.setState({
+                phase: this.Phase.GroupMemberInfo,
+                groupId: payload.groupId,
+                member: payload.member,
+            });
+        } else if (payload.action === "view_room") {
+            this.setState({
+                phase: this.Phase.RoomMemberList
+            });
         }
     },
 
     render: function() {
-        var MemberList = sdk.getComponent('rooms.MemberList');
-        var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
-        var FilePanel = sdk.getComponent('structures.FilePanel');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var buttonGroup;
-        var inviteGroup;
-        var panel;
+        const MemberList = sdk.getComponent('rooms.MemberList');
+        const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
+        const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
+        const FilePanel = sdk.getComponent('structures.FilePanel');
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        let inviteGroup;
+        let panel;
 
-        var filesHighlight;
-        var membersHighlight;
-        var notificationsHighlight;
+        let filesHighlight;
+        let membersHighlight;
+        let notificationsHighlight;
         if (!this.props.collapsed) {
-            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
+            if (this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) {
                 membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
             else if (this.state.phase == this.Phase.FilePanel) {
@@ -162,11 +193,11 @@ module.exports = React.createClass({
             }
         }
 
-        var membersBadge;
-        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
-            var cli = MatrixClientPeg.get();
-            var room = cli.getRoom(this.props.roomId);
-            var user_is_in_room;
+        let membersBadge;
+        if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo) && this.props.roomId) {
+            const cli = MatrixClientPeg.get();
+            const room = cli.getRoom(this.props.roomId);
+            let user_is_in_room;
             if (room) {
                 membersBadge = room.getJoinedMembers().length;
                 user_is_in_room = room.hasMembershipState(
@@ -186,48 +217,72 @@ module.exports = React.createClass({
 
         }
 
+        let headerButtons = [];
         if (this.props.roomId) {
-            buttonGroup =
-                    <div className="mx_RightPanel_headerButtonGroup">
-                        <AccessibleButton className="mx_RightPanel_headerButton"
-                                title={ _t('Members') } onClick={ this.onMemberListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
-                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
-                            { membersHighlight }
-                        </AccessibleButton>
-                        <AccessibleButton
-                                className="mx_RightPanel_headerButton mx_RightPanel_filebutton"
-                                title={ _t('Files') } onClick={ this.onFileListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
-                            { filesHighlight }
-                        </AccessibleButton>
-                        <AccessibleButton
-                                className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton"
-                                title={ _t('Notifications') } onClick={ this.onNotificationListButtonClick }>
-                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
-                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
-                            { notificationsHighlight }
-                        </AccessibleButton>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title={ _t("Hide panel") } onClick={ this.onCollapseClick }>
-                            <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                        </div>
-                    </div>;
+            headerButtons.push(
+                <AccessibleButton className="mx_RightPanel_headerButton" key="_membersButton"
+                        title={ _t('Members') } onClick={ this.onMemberListButtonClick }>
+                    <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
+                    <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
+                    { membersHighlight }
+                </AccessibleButton>
+            );
+            headerButtons.push(
+                <AccessibleButton
+                        className="mx_RightPanel_headerButton mx_RightPanel_filebutton" key="_filesButton"
+                        title={ _t('Files') } onClick={ this.onFileListButtonClick }>
+                    <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                    <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
+                    { filesHighlight }
+                </AccessibleButton>
+            );
+            headerButtons.push(
+                <AccessibleButton
+                        className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" key="_notifsButton"
+                        title={ _t('Notifications') } onClick={ this.onNotificationListButtonClick }>
+                    <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                    <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                    { notificationsHighlight }
+                </AccessibleButton>
+            );
+        }
+
+        if (this.props.roomId || this.props.groupId) {
+            // Hiding the right panel hides it completely and relies on an 'expand' button
+            // being put in the RoomHeader or GroupView header, so only show the minimise
+            // button on these 2 screens or you won't be able to re-expand the panel.
+            headerButtons.push(
+                <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
+                    title={ _t("Hide panel") } onClick={ this.onCollapseClick }
+                >
+                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                </div>
+            );
         }
 
         if (!this.props.collapsed) {
-            if(this.props.roomId && this.state.phase == this.Phase.MemberList) {
+            if (this.props.roomId && this.state.phase == this.Phase.RoomMemberList) {
                 panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
-            }
-            else if(this.state.phase == this.Phase.MemberInfo) {
-                var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+            } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
+                panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+                inviteGroup = (
+                    <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                        <div className="mx_RightPanel_icon" >
+                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                        </div>
+                        <div className="mx_RightPanel_message">{ _t('Invite to this group') }</div>
+                    </AccessibleButton>
+                );
+            } else if (this.state.phase == this.Phase.RoomMemberInfo) {
+                const MemberInfo = sdk.getComponent('rooms.MemberInfo');
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />
-            }
-            else if (this.state.phase == this.Phase.NotificationPanel) {
-                panel = <NotificationPanel />
-            }
-            else if (this.state.phase == this.Phase.FilePanel) {
-                panel = <FilePanel roomId={this.props.roomId} />
+            } else if (this.state.phase == this.Phase.GroupMemberInfo) {
+                const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
+                panel = <GroupMemberInfo groupMember={this.state.member} groupId={this.props.groupId} key={this.state.member.user_id} />;
+            } else if (this.state.phase == this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />;
+            } else if (this.state.phase == this.Phase.FilePanel) {
+                panel = <FilePanel roomId={this.props.roomId} />;
             }
         }
 
@@ -235,7 +290,7 @@ module.exports = React.createClass({
             panel = <div className="mx_RightPanel_blank"></div>;
         }
 
-        var classes = "mx_RightPanel mx_fadable";
+        let classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
@@ -243,7 +298,9 @@ module.exports = React.createClass({
         return (
             <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
-                    { buttonGroup }
+                    <div className="mx_RightPanel_headerButtonGroup">
+                        {headerButtons}
+                    </div>
                 </div>
                 { panel }
                 <div className="mx_RightPanel_footer">

src/components/structures/RoomSubList.js

@@ -88,6 +88,7 @@ var RoomSubList = React.createClass({
         searchFilter: React.PropTypes.string,
         emptyContent: React.PropTypes.node, // content shown if the list is empty
         headerItems: React.PropTypes.node, // content shown in the sublist header
+        extraTiles: React.PropTypes.arrayOf(React.PropTypes.node), // extra elements added beneath tiles
     },
 
     getInitialState: function() {
@@ -102,6 +103,7 @@ var RoomSubList = React.createClass({
         return {
             onHeaderClick: function() {}, // NOP
             onShowMoreRooms: function() {}, // NOP
+            extraTiles: [],
             isInvite: false,
         };
     },
@@ -534,13 +536,14 @@ var RoomSubList = React.createClass({
         var label = this.props.collapsed ? null : this.props.label;
 
         let content;
-        if (this.state.sortedList.length == 0 && !this.props.searchFilter) {
+        if (this.state.sortedList.length == 0 && !this.props.searchFilter && !this.props.extraTiles) {
             content = this.props.emptyContent;
         } else {
             content = this.makeRoomTiles();
+            content.push(...this.props.extraTiles);
         }
 
-        if (this.state.sortedList.length > 0 || this.props.editable) {
+        if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0 || this.props.editable) {
             var subList;
             var classes = "mx_RoomSubList";