Merge pull request #5125 from vector-im/luke/groups-add-rooms

Implement "Add room to group" feature

src/components/structures/RightPanel.js

@@ -25,7 +25,7 @@ import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 import Analytics from 'matrix-react-sdk/lib/Analytics';
 import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
 import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
-import { showGroupInviteDialog } from 'matrix-react-sdk/lib/GroupInvite';
+import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker';
 
 class HeaderButton extends React.Component {
     constructor() {
@@ -87,6 +87,7 @@ module.exports = React.createClass({
     Phase: {
         RoomMemberList: 'RoomMemberList',
         GroupMemberList: 'GroupMemberList',
+        GroupRoomList: 'GroupRoomList',
         FilePanel: 'FilePanel',
         NotificationPanel: 'NotificationPanel',
         RoomMemberInfo: 'RoomMemberInfo',
@@ -132,6 +133,10 @@ module.exports = React.createClass({
 
         if (this.state.phase === this.Phase.GroupMemberList) {
             showGroupInviteDialog(this.props.groupId);
+        } else if (this.state.phase === this.Phase.GroupRoomList) {
+            showGroupAddRoomDialog(this.props.groupId).then(() => {
+                this.forceUpdate();
+            });
         } else {
             // call AddressPickerDialog
             dis.dispatch({
@@ -205,10 +210,16 @@ module.exports = React.createClass({
 
     render: function() {
         const MemberList = sdk.getComponent('rooms.MemberList');
-        const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
+        const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
+
+        const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
+        const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
+        const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
+
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         let inviteGroup;
 
         let membersBadge;
@@ -256,6 +267,19 @@ module.exports = React.createClass({
                     analytics={['Right Panel', 'Notification List Button', 'click']}
                 />,
             ];
+        } else if (this.props.groupId) {
+            headerButtons = [
+                <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+                    isHighlighted={this.state.phase === this.Phase.GroupMemberList}
+                    clickPhase={this.Phase.GroupMemberList}
+                    analytics={['Right Panel', 'Group Member List Button', 'click']}
+                />,
+                <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-files.svg"
+                    isHighlighted={this.state.phase === this.Phase.GroupRoomList}
+                    clickPhase={this.Phase.GroupRoomList}
+                    analytics={['Right Panel', 'Group Room List Button', 'click']}
+                />,
+            ];
         }
 
         if (this.props.roomId || this.props.groupId) {
@@ -277,19 +301,11 @@ module.exports = React.createClass({
                 panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
             } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
                 panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
-                inviteGroup = (
+            } else if (this.state.phase === this.Phase.GroupRoomList) {
-                    <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-                        <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.GroupMemberInfo) {
-                const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
                 panel = <GroupMemberInfo
                     groupMember={this.state.member}
                     groupId={this.props.groupId}
@@ -305,6 +321,24 @@ module.exports = React.createClass({
             panel = <div className="mx_RightPanel_blank"></div>;
         }
 
+        if (this.props.groupId) {
+            inviteGroup = this.state.phase === this.Phase.GroupMemberList ? (
+                <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>
+            ) : (
+                <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                    <div className="mx_RightPanel_icon" >
+                        <TintableSvg src="img/icons-files.svg" width="35" height="35" />
+                    </div>
+                    <div className="mx_RightPanel_message">{ _t('Add room to this group') }</div>
+                </AccessibleButton>
+            );
+        }
+
         let classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";

src/i18n/strings/en_EN.json

@@ -220,5 +220,6 @@
   "To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
   "Set Password": "Set Password",
   "Couldn't load home page": "Couldn't load home page",
-  "Invite to this group": "Invite to this group"
+  "Invite to this group": "Invite to this group",
+  "Add room to this group": "Add room to this group"
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EntityTile {
+.mx_EntityTile,
+.mx_GroupRoomTile {
     display: table-row;
     position: relative;
     color: $primary-fg-color;
@@ -28,7 +29,8 @@ limitations under the License.
     width: 26px;
 }
 
-.mx_EntityTile_avatar {
+.mx_EntityTile_avatar,
+.mx_GroupRoomTile_avatar {
     display: table-cell;
     padding-left: 3px;
     padding-right: 12px;
@@ -48,7 +50,8 @@ limitations under the License.
     right: 6px;
 }
 
-.mx_EntityTile_name {
+.mx_EntityTile_name,
+.mx_GroupRoomTile_name {
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberList {
+.mx_MemberList,
+.mx_GroupMemberList,
+.mx_GroupRoomList {
     height: 100%;
 
     margin-top: 12px;
@@ -44,7 +46,9 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList_query {
+.mx_MemberList_query,
+.mx_GroupMemberList_query,
+.mx_GroupRoomList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
     border: 1px solid $input-border-color;
@@ -57,13 +61,17 @@ limitations under the License.
     width: 189px;
 }
 
-.mx_MemberList_query::-moz-placeholder {
+.mx_MemberList_query::-moz-placeholder,
+.mx_GroupMemberList_query::-moz-placeholder,
+.mx_GroupRoomList_query::-moz-placeholder {
     color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
 
-.mx_MemberList_query::-webkit-input-placeholder {
+.mx_MemberList_query::-webkit-input-placeholder,
+.mx_GroupMemberList_query::-webkit-input-placeholder,
+.mx_GroupRoomList_query::-webkit-input-placeholder {
     color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;

src/skins/vector/css/vector-web/structures/_RightPanel.scss

@@ -78,6 +78,7 @@ limitations under the License.
 
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel .mx_GroupRoomList,
 .mx_RightPanel_blank {
     order: 2;
     flex: 1 1 0;