Implement UserPickerDialog for adding users

Also, use AccessibleButtons.

src/components/structures/GroupView.js

@@ -66,12 +66,12 @@ const CategoryRoomList = React.createClass({
         return <div className="mx_GroupView_featuredThings_container">
             {catHeader}
             {roomNodes}
-            <div className="mx_GroupView_featuredThings_addButton">
+            <AccessibleButton className="mx_GroupView_featuredThings_addButton">
                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64"/>
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     {_t('Add a Room')}
                 </div>
-            </div>
+            </AccessibleButton>
         </div>;
     },
 });
@@ -130,6 +130,32 @@ const RoleUserList = React.createClass({
                 name: PropTypes.string,
             }).isRequired,
         }),
+        groupId: PropTypes.string.isRequired,
+    },
+
+    onUsersSelected: function(addrs) {
+        addrs.forEach((addr) => {
+            // const userId = addr.address;
+            // TODO: Add user to the group via API hit
+        });
+    },
+
+    onAddUsersClicked: function(ev) {
+        ev.preventDefault();
+        const UserPickerDialog = sdk.getComponent("dialogs.UserPickerDialog");
+        Modal.createTrackedDialog('Add Users to Group Summary', '', UserPickerDialog, {
+            title: _t('Add users to the group summary'),
+            description: _t("Who would you like to add to this summary?"),
+            placeholder: _t("Name or matrix ID"),
+            button: _t("Add to summary"),
+            validAddressTypes: ['mx'],
+            groupId: this.props.groupId,
+            onFinished: (success, addrs) => {
+                if (!success) return;
+
+                this.onUsersSelected(addrs);
+            },
+        });
     },
 
     render: function() {
@@ -144,12 +170,12 @@ const RoleUserList = React.createClass({
         return <div className="mx_GroupView_featuredThings_container">
             {roleHeader}
             {userNodes}
-            <div className="mx_GroupView_featuredThings_addButton">
+            <AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64"/>
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     {_t('Add a User')}
                 </div>
-            </div>
+            </AccessibleButton>
         </div>;
     },
 });
@@ -432,10 +458,10 @@ export default React.createClass({
             }
         });
 
-        const noRoleNode = <RoleUserList users={noRoleUsers} />;
+        const noRoleNode = <RoleUserList users={noRoleUsers} groupId={this.props.groupId}/>;
         const roleUserNodes = Object.keys(roleUsers).map((roleId) => {
             const role = summary.users_section.roles[roleId];
-            return <RoleUserList key={roleId} users={roleUsers[roleId]} role={role} />;
+            return <RoleUserList key={roleId} users={roleUsers[roleId]} role={role} groupId={this.props.groupId}/>;
         });
 
         return <div className="mx_GroupView_featuredThings">

src/components/views/dialogs/UserPickerDialog.js

@@ -40,6 +40,7 @@ module.exports = React.createClass({
         focus: PropTypes.bool,
         validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
         onFinished: PropTypes.func.isRequired,
+        groupId: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -140,7 +141,9 @@ module.exports = React.createClass({
         // Only do search if there is something to search
         if (query.length > 0 && query != '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
-                if (this.state.serverSupportsUserDirectory) {
+                if (this.props.groupId) {
+                    this._doNaiveGroupSearch(query);
+                } else if (this.state.serverSupportsUserDirectory) {
                     this._doUserDirectorySearch(query);
                 } else {
                     this._doLocalSearch(query);
@@ -185,6 +188,26 @@ module.exports = React.createClass({
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
+    _doNaiveGroupSearch: function(query) {
+        this.setState({
+            busy: true,
+            query,
+            searchError: null,
+        });
+        MatrixClientPeg.get().getGroupUsers(this.props.groupId).then((resp) => {
+            this._processResults(resp.chunk, query);
+        }).catch((err) => {
+            console.error('Error whilst searching user directory: ', err);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
     _doUserDirectorySearch: function(query) {
         this.setState({
             busy: true,

src/i18n/strings/en_EN.json

@@ -888,5 +888,8 @@
     "Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
     "Flair": "Flair",
     "Add a Room": "Add a Room",
-    "Add a User": "Add a User"
+    "Add a User": "Add a User",
+    "Add users to the group summary": "Add users to the group summary",
+    "Who would you like to add to this summary?": "Who would you like to add to this summary?",
+    "Add to summary": "Add to summary"
 }