Single selector (#5792)

* [system admin - orgs] member: replaced the membership selector with the new 'single selector'

* deleted unused wiki-permission-editor.js

frontend/src/components/select-editor/sysadmin-user-membership-editor.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import SelectEditor from './select-editor';
-
-const propTypes = {
-  isTextMode: PropTypes.bool.isRequired,
-  isEditIconShow: PropTypes.bool.isRequired,
-  statusOptions: PropTypes.array.isRequired,
-  currentStatus: PropTypes.string.isRequired,
-  onStatusChanged: PropTypes.func.isRequired
-};
-
-class SysAdminUserMembershipEditor extends React.Component {
-
-  translateStatus = (status) => {
-    switch (status) {
-      case 'is_org_staff':
-        return gettext('Admin');
-      case 'not_is_org_staff':
-        return gettext('Member');
-    }
-  };
-
-  render() {
-    return (
-      <SelectEditor
-        isTextMode={this.props.isTextMode}
-        isEditIconShow={this.props.isEditIconShow}
-        options={this.props.statusOptions}
-        currentOption={this.props.currentStatus}
-        onOptionChanged={this.props.onStatusChanged}
-        translateOption={this.translateStatus}
-      />
-    );
-  }
-}
-
-SysAdminUserMembershipEditor.propTypes = propTypes;
-
-export default SysAdminUserMembershipEditor;

frontend/src/components/select-editor/wiki-permission-editor.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import SelectEditor from './select-editor';
-
-const propTypes = {
-  isTextMode: PropTypes.bool.isRequired,
-  isEditIconShow: PropTypes.bool.isRequired,
-  permissions: PropTypes.array.isRequired,
-  currentPermission: PropTypes.string.isRequired,
-  onPermissionChanged: PropTypes.func.isRequired
-};
-
-class WikiPermissionEditor extends React.Component {
-
-  translatePermission = (permission) => {
-    if (permission === 'private') {
-      return gettext('Private');
-    }
-
-    if (permission === 'public') {
-      return gettext('Public');
-    }
-  };
-
-  render() {
-    return (
-      <SelectEditor
-        isTextMode={this.props.isTextMode}
-        isEditIconShow={this.props.isEditIconShow}
-        options={this.props.permissions}
-        currentOption={this.props.currentPermission}
-        onOptionChanged={this.props.onPermissionChanged}
-        translateOption={this.translatePermission}
-      />
-    );
-  }
-
-}
-
-WikiPermissionEditor.propTypes = propTypes;
-
-export default WikiPermissionEditor;

frontend/src/pages/sys-admin/orgs/org-users.js

@@ -9,7 +9,6 @@ import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Selector from '../../../components/single-selector';
-import SysAdminUserMembershipEditor from '../../../components/select-editor/sysadmin-user-membership-editor';
 import SysAdminAddUserDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-user-dialog';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import OpMenu from '../../../components/dialog/op-menu';
@@ -163,8 +162,8 @@ class Item extends Component {
     this.props.updateStatus(this.props.item.email, statusOption.value);
   };
 
-  updateMembership= (membershipValue) => {
-    this.props.updateMembership(this.props.item.email, membershipValue);
+  updateMembership= (membershipOption) => {
+    this.props.updateMembership(this.props.item.email, membershipOption.value);
   };
 
   deleteUser = () => {
@@ -204,6 +203,15 @@ class Item extends Component {
     }
   };
 
+  translateMembership = (membership) => {
+    switch (membership) {
+      case 'Admin':
+        return gettext('Admin');
+      case 'Member':
+        return gettext('Member');
+    }
+  };
+
   render() {
     const { item } = this.props;
     const { highlight, isOpIconShown, isDeleteDialogOpen, isResetPasswordDialogOpen } = this.state;
@@ -223,6 +231,17 @@ class Item extends Component {
     });
     const currentSelectedStatusOption = this.statusOptions.filter(item => item.isSelected)[0];
 
+    // for 'user membership'
+    const curMembership = item.is_org_staff? 'Admin' : 'Member';
+    this.membershipOptions = ['Admin', 'Member'].map(item => {
+      return {
+        value: item,
+        text: this.translateMembership(item),
+        isSelected: item == curMembership
+      };
+    });
+    const currentSelectedMembershipOption = this.membershipOptions.filter(item => item.isSelected)[0];
+
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -237,12 +256,12 @@ class Item extends Component {
             />
           </td>
           <td>
-            <SysAdminUserMembershipEditor
-              isTextMode={true}
-              isEditIconShow={isOpIconShown}
-              currentStatus={item.is_org_staff ? 'is_org_staff' : 'not_is_org_staff'}
-              statusOptions={['is_org_staff', 'not_is_org_staff']}
-              onStatusChanged={this.updateMembership}
+            <Selector
+              isDropdownToggleShown={highlight}
+              currentSelectedOption={currentSelectedMembershipOption}
+              options={this.membershipOptions}
+              selectOption={this.updateMembership}
+              toggleItemFreezed={this.props.toggleItemFreezed}
             />
           </td>
           <td>{`${Utils.bytesToSize(item.quota_usage)} / ${item.quota_total > 0 ? Utils.bytesToSize(item.quota_total) : '--'}`}</td>
@@ -373,7 +392,7 @@ class OrgUsers extends Component {
   };
 
   updateMembership = (email, membershipValue) => {
-    const isOrgStaff = membershipValue == 'is_org_staff';
+    const isOrgStaff = membershipValue == 'Admin';
     seafileAPI.sysAdminUpdateOrgUser(this.props.orgID, email, 'is_org_staff', isOrgStaff).then(res => {
       let newUserList = this.state.userList.map(item => {
         if (item.email == email) {