Select editor encapsulate (#2794)

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import RoleEditor from '../select-editor/role-eidtor';
 import UserSelect from '../../models/user-select';
 import '../../css/manage-members-dialog.css';
 
@@ -152,10 +152,11 @@ class Member extends React.PureComponent {
 
   constructor(props) {
     super(props);
+    this.roles = ['Admin', 'Member'];
   }
 
-  onChangeUserPermission = (permission) => {
-    let isAdmin = permission === 'Admin' ? 'True' : 'False';
+  onChangeUserRole = (role) => {
+    let isAdmin = role === 'Admin' ? 'True' : 'False';
     seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
       this.props.onGroupMembersChange();
     });
@@ -169,7 +170,6 @@ class Member extends React.PureComponent {
 
   render() {
     const { item, isOwner } = this.props;
-    const permissions = ['Admin', 'Member'];
     return(
       <tr>
         <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
@@ -179,12 +179,12 @@ class Member extends React.PureComponent {
             <span className="group-admin">{item.role}</span>
           }
           {(isOwner === true && item.role !== 'Owner') &&
-            <PermissionEditor 
+            <RoleEditor 
               isTextMode={true}
               isEditIconShow={true}
-              currentPermission={this.props.item.role}
-              permissions={permissions}
-              onPermissionChangedHandler={this.onChangeUserPermission}
+              currentRole={this.props.item.role}
+              roles={this.roles}
+              onRoleChangedHandler={this.onChangeUserRole}
             />
           }
         </td>

frontend/src/components/dialog/share-to-group.js

@@ -5,7 +5,7 @@ import Select from 'react-select';
 import makeAnimated from 'react-select/lib/animated';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import PermissionEditor from '../select-editor/permission-editor';
 
 class GroupItem extends React.Component {
 
@@ -250,9 +250,9 @@ class ShareToGroup extends React.Component {
         <table>
           <thead>
             <tr>
-              <th width="40%">{gettext('Group')}</th>
-              <th width="40%">{gettext('Permission')}</th>
-              <th width="20%"></th>
+              <th width="50%">{gettext('Group')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
             </tr>
           </thead>
           <tbody>
@@ -298,9 +298,9 @@ class ShareToGroup extends React.Component {
           <table className="table-thead-hidden">
             <thead>
               <tr>
-                <th width="40%">{gettext('Group')}</th>
-                <th width="40%">{gettext('Permission')}</th>
-                <th width="20%"></th>
+                <th width="50%">{gettext('Group')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
               </tr>
             </thead>
             <GroupList 

frontend/src/components/dialog/share-to-user.js

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/lib/Async';
 import { gettext } from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import PermissionEditor from '../permission-editor';
+import PermissionEditor from '../select-editor/permission-editor';
 
 class UserItem extends React.Component {
 
@@ -35,6 +35,7 @@ class UserItem extends React.Component {
 
   render() {
     let item = this.props.item;
+    let currentPermission = item.is_admin ? 'admin' : item.permission;
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="name">{item.user_info.nickname}</td>
@@ -42,7 +43,7 @@ class UserItem extends React.Component {
           <PermissionEditor 
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
-            currentPermission={item.permission}
+            currentPermission={currentPermission}
             permissions={this.props.permissions}
             onPermissionChangedHandler={this.onChangeUserPermission}
           />
@@ -255,6 +256,7 @@ class ShareToUser extends React.Component {
       if (username === sharedItemUsername) {
         sharedItem.permission = permission;
       }
+      sharedItem.is_admin = permission === 'admin' ? true : false;
       return sharedItem;
     });
     this.setState({sharedItems: sharedItems});
@@ -267,9 +269,9 @@ class ShareToUser extends React.Component {
         <table>
           <thead>
             <tr>
-              <th width="40%">{gettext('User')}</th>
-              <th width="40%">{gettext('Permission')}</th>
-              <th width="20%"></th>
+              <th width="50%">{gettext('User')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
             </tr>
           </thead>
           <tbody>
@@ -323,9 +325,9 @@ class ShareToUser extends React.Component {
           <table className="table-thead-hidden">
             <thead>
               <tr>
-                <th width="40%">{gettext('User')}</th>
-                <th width="40%">{gettext('Permission')}</th>
-                <th width="20%"></th>
+                <th width="50%">{gettext('User')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
               </tr>
             </thead>
             <UserList