refactor manage group member dialog (#8104)

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalBody } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import ListAndAddGroupMembers from '../list-and-add-group-members';
-import SeahubModalHeader from '@/components/common/seahub-modal-header';
-
-import '../../css/manage-members-dialog.css';
-
-const propTypes = {
-  groupID: PropTypes.number.isRequired,
-  isOwner: PropTypes.bool.isRequired,
-  toggleManageMembersDialog: PropTypes.func,
-  toggleDepartmentDetailDialog: PropTypes.func,
-};
-
-class ManageMembersDialog extends React.Component {
-
-  render() {
-    const { groupID, isOwner } = this.props;
-    return (
-      <Modal isOpen={true} toggle={this.props.toggleManageMembersDialog} className="group-manage-members-dialog">
-        <SeahubModalHeader toggle={this.props.toggleManageMembersDialog}>{gettext('Manage group members')}</SeahubModalHeader>
-        <ModalBody className="pb-0">
-          <ListAndAddGroupMembers
-            groupID={groupID}
-            isOwner={isOwner}
-            toggleManageMembersDialog={this.props.toggleManageMembersDialog}
-            toggleDepartmentDetailDialog={this.props.toggleDepartmentDetailDialog}
-          />
-        </ModalBody>
-      </Modal>
-    );
-  }
-}
-
-ManageMembersDialog.propTypes = propTypes;
-
-export default ManageMembersDialog;

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, InputGroup, InputGroupText, Input } from 'reactstrap';
+import { Button, InputGroup, InputGroupText, Input, Modal, ModalBody } from 'reactstrap';
+import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { Utils } from '../utils/utils';
 import { gettext } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
@@ -11,6 +12,8 @@ import GroupMembers from './group-members';
 import SelectUsersIcon from './select-members-to-share-with';
 import { eventBus } from './common/event-bus';
 
+import '../css/manage-members-dialog.css';
+
 const propTypes = {
   toggleManageMembersDialog: PropTypes.func,
   toggleDepartmentDetailDialog: PropTypes.func,
@@ -166,75 +169,72 @@ class ManageMembersDialog extends React.Component {
   render() {
     const {
       isLoading, hasNextPage, groupMembers,
-      keyword, membersFound,
+      keyword, membersFound, errMessage, searchActive
-      searchActive
     } = this.state;
 
     return (
-      <Fragment>
+      <Modal isOpen={true} toggle={this.props.toggleManageMembersDialog} className="group-manage-members-dialog">
-        <p className="mb-2">{gettext('Add group member')}</p>
+        <SeahubModalHeader toggle={this.props.toggleManageMembersDialog}>{gettext('Manage group members')}</SeahubModalHeader>
-        <div className='add-members'>
+        <ModalBody className="pb-0">
-          <div className="position-relative">
+          <p className="mb-2">{gettext('Add group member')}</p>
-            <UserSelect
+          <div className='add-members'>
-              placeholder={gettext('Search users')}
+            <div className="position-relative">
-              onSelectChange={this.onSelectChange}
+              <UserSelect
-              selectedUsers={this.state.selectedUsers}
+                placeholder={gettext('Search users')}
-              isMulti={true}
+                onSelectChange={this.onSelectChange}
-              className="add-members-select"
+                selectedUsers={this.state.selectedUsers}
-            />
+                isMulti={true}
-            <SelectUsersIcon onClick={this.props.toggleDepartmentDetailDialog} />
+                className="add-members-select"
-          </div>
-          {this.state.selectedUsers.length > 0 ?
-            <Button color="primary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
-            <Button color="primary" 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 &&
-          <InputGroup className={`search-group-members rounded ${searchActive ? 'active' : ''}`}>
-            <InputGroupText>
-              <i className="sf3-font sf3-font-search" aria-hidden={true}></i>
-            </InputGroupText>
-            <Input
-              type="text"
-              className="input-group-input px-0"
-              placeholder={gettext('Search group members')}
-              value={keyword}
-              onChange={this.searchMembers}
-              onFocus={this.onSearchInputFocus}
-              onBlur={this.onSearchInputBlur}
-            />
-            {keyword && (
-              <InputGroupText>
-                <i className="sf2-icon-x1" aria-hidden={true} onClick={this.clearSearch}></i>
-              </InputGroupText>
-            )}
-          </InputGroup>
-        }
-        <div className="manage-members" onScroll={keyword.trim() ? () => {} : this.handleScroll}>
-          {isLoading ? <Loading /> : (
-            <Fragment>
-              <GroupMembers
-                groupMembers={keyword.trim() ? membersFound : groupMembers}
-                changeMember={this.changeMember}
-                deleteMember={this.deleteMember}
-                groupID={this.props.groupID}
-                isOwner={this.props.isOwner}
-                isItemFreezed={this.state.isItemFreezed}
-                toggleItemFreezed={this.toggleItemFreezed}
               />
-              {(!keyword.trim() && hasNextPage) && <Loading />}
+              <SelectUsersIcon onClick={this.props.toggleDepartmentDetailDialog} />
-            </Fragment>
+            </div>
-          )}
+            {this.state.selectedUsers.length > 0 ?
-        </div>
+              <Button color="primary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
-      </Fragment>
+              <Button color="primary" disabled>{gettext('Submit')}</Button>
+            }
+          </div>
+          {errMessage.length > 0 &&
+            errMessage.map((item, index = 0) => <div className="group-error error" key={index}>{item.error_msg}</div>)
+          }
+          {groupMembers.length > 10 &&
+            <InputGroup className={`search-group-members rounded ${searchActive ? 'active' : ''}`}>
+              <InputGroupText>
+                <i className="sf3-font sf3-font-search" aria-hidden={true}></i>
+              </InputGroupText>
+              <Input
+                type="text"
+                className="input-group-input px-0"
+                placeholder={gettext('Search group members')}
+                value={keyword}
+                onChange={this.searchMembers}
+                onFocus={this.onSearchInputFocus}
+                onBlur={this.onSearchInputBlur}
+              />
+              {keyword && (
+                <InputGroupText>
+                  <i className="sf2-icon-x1" aria-hidden={true} onClick={this.clearSearch}></i>
+                </InputGroupText>
+              )}
+            </InputGroup>
+          }
+          <div className="manage-members" onScroll={keyword.trim() ? () => {} : this.handleScroll}>
+            {isLoading ? <Loading /> : (
+              <Fragment>
+                <GroupMembers
+                  groupMembers={keyword.trim() ? membersFound : groupMembers}
+                  changeMember={this.changeMember}
+                  deleteMember={this.deleteMember}
+                  groupID={this.props.groupID}
+                  isOwner={this.props.isOwner}
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleItemFreezed={this.toggleItemFreezed}
+                />
+                {(!keyword.trim() && hasNextPage) && <Loading />}
+              </Fragment>
+            )}
+          </div>
+        </ModalBody>
+      </Modal>
     );
   }
 }

frontend/src/pages/groups/group-op-menu.js

@@ -11,7 +11,7 @@ import DismissGroupDialog from '../../components/dialog/dismiss-group-dialog';
 import RenameGroupDialog from '../../components/dialog/rename-group-dialog';
 import TransferGroupDialog from '../../components/dialog/transfer-group-dialog';
 import ImportMembersDialog from '../../components/dialog/import-members-dialog';
-import ManageMembersDialog from '../../components/dialog/manage-members-dialog';
+import ManageMembersDialog from '../../components/manage-members-dialog';
 import DepartmentDetailDialog from '../../components/dialog/department-detail-dialog';
 import LeaveGroupDialog from '../../components/dialog/leave-group-dialog';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';