Implement button to remove a room from a group

NB: This doesn't provide any feedback to the user. We should use a GroupSummaryStore-style component to refresh the view after a successful hit to the API. This could affect the summary view as well, because when rooms are removed from a group, they are also removed from the summary (if necessary).

src/components/views/groups/GroupRoomTile.js

@@ -49,6 +49,13 @@ const GroupRoomTile = React.createClass({
         });
     },
 
+    onDeleteClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.context.matrixClient
+            .removeRoomFromGroup(this.props.groupId, this.props.groupRoom.roomId);
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -76,6 +83,9 @@ const GroupRoomTile = React.createClass({
                 <div className="mx_GroupRoomTile_name">
                     { name }
                 </div>
+                <AccessibleButton className="mx_GroupRoomTile_delete" onClick={this.onDeleteClick}>
+                    <img src="img/cancel-small.svg" />
+                </AccessibleButton>
             </AccessibleButton>
         );
     },

src/groups.js

@@ -24,8 +24,7 @@ export const GroupMemberType = PropTypes.shape({
 
 export const GroupRoomType = PropTypes.shape({
     name: PropTypes.string,
-    // TODO: API doesn't return this yet
+    roomId: PropTypes.string.isRequired,
-    // roomId: PropTypes.string.isRequired,
     canonicalAlias: PropTypes.string,
     avatarUrl: PropTypes.string,
 });
@@ -41,6 +40,7 @@ export function groupMemberFromApiObject(apiObject) {
 export function groupRoomFromApiObject(apiObject) {
     return {
         name: apiObject.name,
+        roomId: apiObject.room_id,
         canonicalAlias: apiObject.canonical_alias,
         avatarUrl: apiObject.avatar_url,
     };