Merge pull request #5005 from haiwen/search-group-member

search group member

frontend/src/components/dialog/manage-members-dialog.js

@@ -1,21 +1,21 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
-import { Utils } from '../../utils/utils';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import RoleEditor from '../select-editor/role-editor';
-import UserSelect from '../user-select';
-import toaster from '../toast';
-import Loading from '../loading';
+import ListAndAddGroupMembers from '../list-and-add-group-members';
+import SearchGroupMembers from '../search-group-members';
 
 import '../../css/manage-members-dialog.css';
 
 const propTypes = {
   groupID: PropTypes.string.isRequired,
-  toggleManageMembersDialog: PropTypes.func.isRequired,
-  onGroupChanged: PropTypes.func.isRequired,
   isOwner: PropTypes.bool.isRequired,
+  toggleManageMembersDialog: PropTypes.func.isRequired
+};
+
+const MANAGEMENT_MODE= {
+  LIST_AND_ADD: 'list_and_add',
+  SEARCH: 'search'
 };
 
 class ManageMembersDialog extends React.Component {
@@ -23,187 +23,44 @@ class ManageMembersDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading: true, // first loading
-      isLoadingMore: false,
-      groupMembers: [],
-      page: 1,
-      perPage: 100,
-      hasNextPage: false,
-      selectedOption: null,
-      errMessage: [],
-      isItemFreezed: false
+      currentMode: MANAGEMENT_MODE.LIST_AND_ADD
     };
   }
 
-  componentDidMount() {
-    this.listGroupMembers(this.state.page);
-  }
-
-  listGroupMembers = (page) => {
-    const { groupID } = this.props;
-    const { perPage, groupMembers } = this.state;
-    seafileAPI.listGroupMembers(groupID, page, perPage).then((res) => {
-      const members = res.data;
-      this.setState({
-        isLoading: false,
-        isLoadingMore: false,
-        page: page,
-        hasNextPage: members.length < perPage ? false : true,
-        groupMembers: groupMembers.concat(members) 
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-      this.setState({
-        isLoading: false,
-        isLoadingMore: false,
-        hasNextPage: false
-      });
-    });
-  }
-
-  onSelectChange = (option) => {
+  changeMode = () => {
     this.setState({
-      selectedOption: option,
-      errMessage: [],
-    });
-  }
-
-  addGroupMember = () => {
-    let emails = [];
-    for (let i = 0; i < this.state.selectedOption.length; i++) {
-      emails.push(this.state.selectedOption[i].email);
-    }
-    seafileAPI.addGroupMembers(this.props.groupID, emails).then((res) => {
-      const newMembers = res.data.success;
-      this.setState({
-        groupMembers: [].concat(newMembers, this.state.groupMembers),
-        selectedOption: null,
-      });
-      this.refs.userSelect.clearSelect();
-      if (res.data.failed.length > 0) {
-        this.setState({
-          errMessage: res.data.failed
-        });
-      }
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  toggleItemFreezed = (isFreezed) => {
-    this.setState({
-      isItemFreezed: isFreezed
-    });
-  }
-
-  toggle = () => {
-    this.props.toggleManageMembersDialog();
-  }
-
-  handleScroll = (event) => {
-    // isLoadingMore: to avoid repeated request
-    const { page, hasNextPage, isLoadingMore } = this.state;
-    if (hasNextPage && !isLoadingMore) {
-      const clientHeight = event.target.clientHeight;
-      const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
-      const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
-      if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
-          this.listGroupMembers(page + 1); 
-        }); 
-      }   
-    }   
-  }
-
-  changeMember = (targetMember) => {
-    this.setState({
-      groupMembers: this.state.groupMembers.map((item) => {
-        if (item.email == targetMember.email) {
-          item = targetMember;
-        }
-        return item;
-      })
-    });
-  }
-
-  deleteMember = (targetMember) => {
-    const groupMembers = this.state.groupMembers;
-    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
-    this.setState({
-      groupMembers: groupMembers
+      currentMode: this.state.currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+        MANAGEMENT_MODE.SEARCH : MANAGEMENT_MODE.LIST_AND_ADD
     });
   }
 
   render() {
-    const { isLoading, hasNextPage } = this.state;
+    const { currentMode } = this.state;
+    const { groupID, isOwner, toggleManageMembersDialog: toggle } = this.props;
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Manage group members')}</ModalHeader>
-        <ModalBody>
-          <p>{gettext('Add group member')}</p>
-          <div className='add-members'>
-            <UserSelect
-              placeholder={gettext('Search users...')}
-              onSelectChange={this.onSelectChange}
-              ref="userSelect"
-              isMulti={true}
-              className="add-members-select"
-            />
-            {this.state.selectedOption ?
-              <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
-              <Button color="secondary" disabled>{gettext('Submit')}</Button>
-            }
-          </div>
-          {
-            this.state.errMessage.length > 0 &&
-            this.state.errMessage.map((item, index = 0) => {
-              return (
-                <div className="group-error error" key={index}>{item.error_msg}</div>
-              );
-            })
-          }
-          <div className="manage-members" onScroll={this.handleScroll}>
-            {isLoading ? <Loading /> : (
+      <Modal isOpen={true} toggle={toggle} className="group-manage-members-dialog">
+        <ModalHeader toggle={toggle}>
+          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+            gettext('Manage group members') : (
               <Fragment>
-                <Table size="sm" className="manage-members-table">
-                  <thead>
-                    <tr>
-                      <th width="15%"></th>
-                      <th width="45%">{gettext('Name')}</th>
-                      <th width="30%">{gettext('Role')}</th>
-                      <th width="10%"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {
-                      this.state.groupMembers.length > 0 &&
-                  this.state.groupMembers.map((item, index) => {
-                    return (
-                        <Member
-                          key={index}
-                          item={item}
-                          changeMember={this.changeMember}
-                          deleteMember={this.deleteMember}
-                          groupID={this.props.groupID}
-                          isOwner={this.props.isOwner}
-                          isItemFreezed={this.state.isItemFreezed}
-                          toggleItemFreezed={this.toggleItemFreezed}
-                        />
-                    );
-                  })
-                    }
-                  </tbody>
-                </Table>
-                {hasNextPage && <Loading />}
+                <button className="fa fa-arrow-left back-icon border-0 bg-transparent mr-2 p-0" onClick={this.changeMode} title={gettext('Back')} aria-label={gettext('Back')}></button>
+                <span>{gettext('Search group members')}</span>
               </Fragment>
-            )}
-          </div>
+            )
+          }
+        </ModalHeader>
+        <ModalBody>
+          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+            <ListAndAddGroupMembers
+              groupID={groupID}
+              isOwner={isOwner}
+              changeMode={this.changeMode}
+            /> :
+            <SearchGroupMembers groupID={groupID} isOwner={isOwner} />
+          }
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button color="secondary" onClick={toggle}>{gettext('Close')}</Button>
         </ModalFooter>
       </Modal>
     );
@@ -212,107 +69,4 @@ class ManageMembersDialog extends React.Component {
 
 ManageMembersDialog.propTypes = propTypes;
 
-const MemberPropTypes = {
-  item: PropTypes.object.isRequired,
-  changeMember: PropTypes.func.isRequired,
-  deleteMember: PropTypes.func.isRequired,
-  groupID: PropTypes.string.isRequired,
-  isOwner: PropTypes.bool.isRequired,
-};
-
-class Member extends React.PureComponent {
-
-  constructor(props) {
-    super(props);
-    this.roles = ['Admin', 'Member'];
-    this.state = ({
-      highlight: false,
-    });
-  }
-
-  onChangeUserRole = (role) => {
-    let isAdmin = role === 'Admin' ? 'True' : 'False';
-    seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
-      this.props.changeMember(res.data);
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  deleteMember = () => {
-    const { item } = this.props;
-    seafileAPI.deleteGroupMember(this.props.groupID, item.email).then((res) => {
-      this.props.deleteMember(item);
-      toaster.success(gettext('Successfully deleted {name}.').replace('{name}', item.name));
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  handleMouseOver = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      highlight: true,
-    });
-  }
-
-  handleMouseLeave = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      highlight: false,
-    });
-  }
-
-  translateRole = (role) => {
-    if (role === 'Admin') {
-      return gettext('Admin');
-    }
-    else if (role === 'Member') {
-      return gettext('Member');
-    }
-    else if (role === 'Owner') {
-      return gettext('Owner');
-    }
-  }
-
-  render() {
-    const { item, isOwner } = this.props;
-    const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
-    return(
-      <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'editing' : ''}>
-        <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
-        <td>{item.name}</td>
-        <td>
-          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) &&
-            <span className="group-admin">{this.translateRole(item.role)}</span>
-          }
-          {(isOwner === true && item.role !== 'Owner') &&
-            <RoleEditor
-              isTextMode={true}
-              isEditIconShow={this.state.highlight}
-              currentRole={item.role}
-              roles={this.roles}
-              onRoleChanged={this.onChangeUserRole}
-              toggleItemFreezed={this.props.toggleItemFreezed}
-            />
-          }
-        </td>
-        <td>
-          {(deleteAuthority && !this.props.isItemFreezed) &&
-            <i
-              className="fa fa-times delete-group-member-icon"
-              onClick={this.deleteMember}>
-            </i>
-          }
-        </td>
-      </tr>
-    );
-  }
-}
-
-Member.propTypes = MemberPropTypes;
-
-
 export default ManageMembersDialog;

frontend/src/components/group-members.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import RoleEditor from './select-editor/role-editor';
+import toaster from './toast';
+import OpIcon from './op-icon';
+
+const propTypes = {
+  groupMembers: PropTypes.array.isRequired,
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  toggleItemFreezed: PropTypes.func.isRequired,
+  changeMember: PropTypes.func.isRequired,
+  deleteMember: PropTypes.func.isRequired
+};
+
+class GroupMembers extends React.Component {
+
+  render() {
+    const { groupMembers, changeMember, deleteMember, groupID, isOwner, isItemFreezed, toggleItemFreezed } = this.props;
+    return (
+      <Table size="sm" className="manage-members-table">
+        <thead>
+          <tr>
+            <th width="15%"></th>
+            <th width="45%">{gettext('Name')}</th>
+            <th width="30%">{gettext('Role')}</th>
+            <th width="10%"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {groupMembers.map((item, index) => {
+            return (
+              <Member
+                key={index}
+                item={item}
+                changeMember={changeMember}
+                deleteMember={deleteMember}
+                groupID={groupID}
+                isOwner={isOwner}
+                isItemFreezed={isItemFreezed}
+                toggleItemFreezed={toggleItemFreezed}
+              />
+            );
+          })
+          }
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+GroupMembers.propTypes = propTypes;
+
+const MemberPropTypes = {
+  item: PropTypes.object.isRequired,
+  changeMember: PropTypes.func.isRequired,
+  deleteMember: PropTypes.func.isRequired,
+  toggleItemFreezed: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired
+};
+
+class Member extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.roles = ['Admin', 'Member'];
+    this.state = ({
+      highlight: false,
+    });
+  }
+
+  onChangeUserRole = (role) => {
+    let isAdmin = role === 'Admin' ? 'True' : 'False';
+    seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
+      this.props.changeMember(res.data);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteMember = () => {
+    const { item } = this.props;
+    seafileAPI.deleteGroupMember(this.props.groupID, item.email).then((res) => {
+      this.props.deleteMember(item);
+      toaster.success(gettext('Successfully deleted {name}.').replace('{name}', item.name));
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleMouseOver = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: true,
+    });
+  }
+
+  handleMouseLeave = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: false,
+    });
+  }
+
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }
+    else if (role === 'Member') {
+      return gettext('Member');
+    }
+    else if (role === 'Owner') {
+      return gettext('Owner');
+    }
+  }
+
+  render() {
+    const { item, isOwner } = this.props;
+    const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
+    return(
+      <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'tr-highlight' : ''} tabIndex="0" onFocus={this.handleMouseOver}>
+        <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
+        <td>{item.name}</td>
+        <td>
+          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) &&
+            <span className="group-admin">{this.translateRole(item.role)}</span>
+          }
+          {(isOwner === true && item.role !== 'Owner') &&
+            <RoleEditor
+              isTextMode={true}
+              isEditIconShow={this.state.highlight}
+              currentRole={item.role}
+              roles={this.roles}
+              onRoleChanged={this.onChangeUserRole}
+              toggleItemFreezed={this.props.toggleItemFreezed}
+            />
+          }
+        </td>
+        <td>
+          {(deleteAuthority && this.state.highlight) &&
+          <OpIcon
+            className="action-icon sf2-icon-x3"
+            title={gettext('Delete')}
+            op={this.deleteMember}
+          />
+          }
+        </td>
+      </tr>
+    );
+  }
+}
+
+Member.propTypes = MemberPropTypes;
+
+
+export default GroupMembers;

frontend/src/components/list-and-add-group-members.js

@@ -0,0 +1,188 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import UserSelect from './user-select';
+import toaster from './toast';
+import Loading from './loading';
+import GroupMembers from './group-members';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  changeMode: PropTypes.func.isRequired
+};
+
+class ManageMembersDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true, // first loading
+      isLoadingMore: false,
+      groupMembers: [],
+      page: 1,
+      perPage: 100,
+      hasNextPage: false,
+      selectedOption: null,
+      errMessage: [],
+      isItemFreezed: false
+    };
+  }
+
+  componentDidMount() {
+    this.listGroupMembers(this.state.page);
+  }
+
+  listGroupMembers = (page) => {
+    const { groupID } = this.props;
+    const { perPage, groupMembers } = this.state;
+    seafileAPI.listGroupMembers(groupID, page, perPage).then((res) => {
+      const members = res.data;
+      this.setState({
+        isLoading: false,
+        isLoadingMore: false,
+        page: page,
+        hasNextPage: members.length < perPage ? false : true,
+        groupMembers: groupMembers.concat(members)
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({
+        isLoading: false,
+        isLoadingMore: false,
+        hasNextPage: false
+      });
+    });
+  }
+
+  onSelectChange = (option) => {
+    this.setState({
+      selectedOption: option,
+      errMessage: [],
+    });
+  }
+
+  addGroupMember = () => {
+    let emails = [];
+    for (let i = 0; i < this.state.selectedOption.length; i++) {
+      emails.push(this.state.selectedOption[i].email);
+    }
+    seafileAPI.addGroupMembers(this.props.groupID, emails).then((res) => {
+      const newMembers = res.data.success;
+      this.setState({
+        groupMembers: [].concat(newMembers, this.state.groupMembers),
+        selectedOption: null,
+      });
+      this.refs.userSelect.clearSelect();
+      if (res.data.failed.length > 0) {
+        this.setState({
+          errMessage: res.data.failed
+        });
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
+  handleScroll = (event) => {
+    // isLoadingMore: to avoid repeated request
+    const { page, hasNextPage, isLoadingMore } = this.state;
+    if (hasNextPage && !isLoadingMore) {
+      const clientHeight = event.target.clientHeight;
+      const scrollHeight = event.target.scrollHeight;
+      const scrollTop    = event.target.scrollTop;
+      const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+      if (isBottom) { // scroll to the bottom
+        this.setState({isLoadingMore: true}, () => {
+          this.listGroupMembers(page + 1);
+        });
+      }
+    }
+  }
+
+  changeMember = (targetMember) => {
+    this.setState({
+      groupMembers: this.state.groupMembers.map((item) => {
+        if (item.email == targetMember.email) {
+          item = targetMember;
+        }
+        return item;
+      })
+    });
+  }
+
+  deleteMember = (targetMember) => {
+    const groupMembers = this.state.groupMembers;
+    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
+    this.setState({
+      groupMembers: groupMembers
+    });
+  }
+
+  render() {
+    const { isLoading, hasNextPage, groupMembers } = this.state;
+    return (
+      <Fragment>
+        <p className="mb-2">{gettext('Add group member')}</p>
+        <div className='add-members'>
+          <UserSelect
+            placeholder={gettext('Search users...')}
+            onSelectChange={this.onSelectChange}
+            ref="userSelect"
+            isMulti={true}
+            className="add-members-select"
+          />
+          {this.state.selectedOption ?
+            <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
+            <Button color="secondary" disabled>{gettext('Submit')}</Button>
+          }
+        </div>
+        {
+          this.state.errMessage.length > 0 &&
+            this.state.errMessage.map((item, index = 0) => {
+              return (
+                <div className="group-error error" key={index}>{item.error_msg}</div>
+              );
+            })
+        }
+        {groupMembers.length > 10 &&
+          <button className="btn btn-secondary btn-block search-group-members-btn text-left border-0" onClick={this.props.changeMode}>
+            <i className="fas fa-search mr-1" aria-hidden={true}></i>
+            {gettext('Search group members')}
+          </button>
+        }
+        <div className="manage-members" onScroll={this.handleScroll}>
+          {isLoading ? <Loading /> : (
+            <Fragment>
+              <GroupMembers
+                groupMembers={groupMembers}
+                changeMember={this.changeMember}
+                deleteMember={this.deleteMember}
+                groupID={this.props.groupID}
+                isOwner={this.props.isOwner}
+                isItemFreezed={this.state.isItemFreezed}
+                toggleItemFreezed={this.toggleItemFreezed}
+              />
+              {hasNextPage && <Loading />}
+            </Fragment>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+ManageMembersDialog.propTypes = propTypes;
+
+export default ManageMembersDialog;

frontend/src/components/op-icon.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../utils/utils';
+
+const propTypes = {
+  className: PropTypes.string.isRequired,
+  op: PropTypes.func,
+  title: PropTypes.string.isRequired
+};
+
+class OpIcon extends React.Component {
+
+  render() {
+    const { className, op, title } = this.props;
+    return (<span
+      tabIndex="0"
+      role="button"
+      className={className}
+      title={title}
+      aria-label={title}
+      onClick={op}
+      onKeyDown={Utils.onKeyDown}
+    ></span>);
+  }
+}
+
+OpIcon.propTypes = propTypes;
+
+export default OpIcon;

frontend/src/components/search-group-members.js

@@ -0,0 +1,130 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Button } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import Loading from './loading';
+import GroupMembers from './group-members';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired
+};
+
+class SearchGroupMembers extends React.Component {
+
+  // pagination is not needed
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      q: '', // query
+      groupMembers: [],
+      errMessage: [],
+      isItemFreezed: false
+    };
+  }
+
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
+  changeMember = (targetMember) => {
+    this.setState({
+      groupMembers: this.state.groupMembers.map((item) => {
+        if (item.email == targetMember.email) {
+          item = targetMember;
+        }
+        return item;
+      })
+    });
+  }
+
+  deleteMember = (targetMember) => {
+    const groupMembers = this.state.groupMembers;
+    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
+    this.setState({
+      groupMembers: groupMembers
+    });
+  }
+
+  submit = () => {
+    let { q } = this.state;
+    q = q.trim();
+    if (!q) {
+      return;
+    }
+    this.setState({
+      isLoading: true
+    });
+    seafileAPI.searchGroupMember(this.props.groupID, q).then((res) => {
+      this.setState({
+        isLoading: false,
+        groupMembers: res.data,
+        errorMsg: ''
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({
+        isLoading: false,
+        errorMsg: errMessage
+      });
+    });
+  }
+
+  onInputChange = (e) => {
+    this.setState({
+      q: e.target.value
+    });
+  }
+
+  onInputKeyDown = (e) => {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
+  render() {
+    const { isLoading, q, errorMsg, groupMembers } = this.state;
+    return (
+      <Fragment>
+        <div className="d-flex justifiy-content-between">
+          <Input
+            type="text"
+            id="search-member"
+            className="form-control search-members-input mr-2"
+            value={q}
+            onChange={this.onInputChange}
+            onKeyDown={this.onInputKeyDown}
+          />
+          <Button type="button" color="secondary" className="flex-shrink-0" onClick={this.submit} disabled={!q.trim()}>{gettext('Submit')}</Button>
+        </div>
+        {errorMsg && <p className="error">{errorMsg}</p>}
+        <div className="manage-members">
+          {isLoading ? <Loading /> : (
+            <Fragment>
+              {groupMembers.length > 0 && (
+                <GroupMembers
+                  groupMembers={groupMembers}
+                  changeMember={this.changeMember}
+                  deleteMember={this.deleteMember}
+                  groupID={this.props.groupID}
+                  isOwner={this.props.isOwner}
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleItemFreezed={this.toggleItemFreezed}
+                />
+              )}
+            </Fragment>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SearchGroupMembers.propTypes = propTypes;
+
+export default SearchGroupMembers;

frontend/src/css/manage-members-dialog.css

@@ -1,33 +1,13 @@
 .manage-members {
   max-height: 300px;
   overflow-y: scroll;
-  margin: 1rem 0 2rem;
+  margin: 10px 0 2rem;
 }
 .manage-members-table th,
 .manage-members-table td {
   vertical-align: middle;
   text-align: left;
 }
-.toggle-group-admin-icon,
-.delete-group-member-icon {
-  opacity: 0;
-  cursor: pointer;
-  color: #888;
-  margin-left: 5px;
-}
-.manage-members-table tr:hover .toggle-group-admin-icon,
-.manage-members-table tr:hover .delete-group-member-icon {
-  opacity: 1;
-}
-
-.manage-members-table .editing {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.toggle-group-admin-icon:hover,
-.delete-group-member-icon:hover {
-  color: #333;
-}
 
 .add-members-select .true__indicator-separator {
   display: none;
@@ -46,4 +26,20 @@
 }
 .group-error {
   margin-top: 10px;
-}
+}
+
+.group-manage-members-dialog .back-icon {
+  color: #999; 
+  cursor: pointer;
+}
+
+.group-manage-members-dialog .search-group-members-btn {
+  font-size: 14px;
+  font-weight: normal;
+  background: #f1f1f1;
+  margin: 12px 0 0;
+}
+
+.group-manage-members-dialog .search-group-members-btn:hover {
+  background: #dbdbdb;
+}

frontend/src/utils/utils.js

@@ -1382,4 +1382,11 @@ export const Utils = {
     return level;
   },
 
+  // for a11y
+  onKeyDown: function(e) {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }    
+  }
+
 };

seahub/api2/endpoints/group_members.py

@@ -133,10 +133,42 @@ class GroupMembers(APIView):
         return Response(member_info, status=status.HTTP_201_CREATED)
 
 
+class GroupSearchMember(APIView):
+
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated,)
+    throttle_classes = (UserRateThrottle,)
+
+    @api_check_group
+    def get(self, request, group_id, format=None):
+        """
+        Search group member by email.
+        """
+
+        q = request.GET.get('q', '')
+        if not q:
+            error_msg = 'q invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        if not is_group_member(group_id, request.user.username):
+            error_msg = 'Permission denied.'
+            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+
+        group_members = []
+        members = ccnet_api.search_group_members(group_id, q)
+        for member in members:
+
+            member_info = get_group_member_info(request, group_id, member.user_name)
+
+            group_members.append(member_info)
+
+        return Response(group_members)
+
+
 class GroupMember(APIView):
     authentication_classes = (TokenAuthentication, SessionAuthentication)
     permission_classes = (IsAuthenticated,)
-    throttle_classes = (UserRateThrottle, )
+    throttle_classes = (UserRateThrottle,)
 
     @api_check_group
     def get(self, request, group_id, email):

seahub/urls.py

@@ -36,7 +36,7 @@ from seahub.api2.endpoints.group_owned_libraries import GroupOwnedLibraries, \
 from seahub.api2.endpoints.address_book.groups import AddressBookGroupsSubGroups
 from seahub.api2.endpoints.address_book.members import AddressBookGroupsSearchMember
 
-from seahub.api2.endpoints.group_members import GroupMembers, GroupMember, \
+from seahub.api2.endpoints.group_members import GroupMembers, GroupSearchMember, GroupMember, \
         GroupMembersBulk, GroupMembersImport, GroupMembersImportExample
 from seahub.api2.endpoints.search_group import SearchGroup
 from seahub.api2.endpoints.share_links import ShareLinks, ShareLink, \
@@ -308,6 +308,7 @@ urlpatterns = [
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/group-owned-libraries/$', GroupOwnedLibraries.as_view(), name='api-v2.1-group-owned-libraries'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/group-owned-libraries/(?P<repo_id>[-0-9a-f]{36})/$', GroupOwnedLibrary.as_view(), name='api-v2.1-owned-group-library'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/$', GroupMembers.as_view(), name='api-v2.1-group-members'),
+    url(r'^api/v2.1/groups/(?P<group_id>\d+)/search-member/$', GroupSearchMember.as_view(), name='api-v2.1-group-search-member'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/bulk/$', GroupMembersBulk.as_view(), name='api-v2.1-group-members-bulk'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/import/$', GroupMembersImport.as_view(), name='api-v2.1-group-members-import'),
     url(r'^api/v2.1/group-members-import-example/$', GroupMembersImportExample.as_view(), name='api-v2.1-group-members-import-example'),