[system admin] modifications (#4266)

* cleaned up the code, removed multiple *-op-menu.js files,
added a common component op-menu.js
* make the 'vertical dots' icon's clickable area be 24*24
* institution member: added confirm to 'set admin'
* improved code

frontend/src/components/dialog/op-menu.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
+import { gettext } from '../../utils/constants';
-import { Utils } from '../../../utils/utils';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   onFreezedItem: PropTypes.func.isRequired,
   onUnfreezedItem: PropTypes.func.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
+  operations: PropTypes.array.isRequired,
+  translateOperations: PropTypes.func.isRequired
 };
 
 class OpMenu extends React.Component {
@@ -47,12 +49,12 @@ class OpMenu extends React.Component {
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle 
           tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
+          className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle fa fa-ellipsis-v"
           title={gettext('More Operations')}
           data-toggle="dropdown" 
           aria-expanded={this.state.isItemMenuShow}
         />
-        <DropdownMenu className="mt-2 mr-2">
+        <DropdownMenu className="my-1 mr-2">
           {operations.map((item, index )=> {
             return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{translateOperations(item)}</DropdownItem>);
           })}

frontend/src/pages/sys-admin/abuse-reports.js

@@ -68,7 +68,7 @@ class AbuseReports extends Component {
           <td>{item.description}</td>
           <td>{moment(item.time).format('YYYY-MM-DD')}</td>
           <td><p onClick={this.updateAbuseReport.bind(this, handled, abuseReportId)}
-                 className="op-target ellipsis ellipsis-op-target cursor-pointer"
+            className="op-target ellipsis ellipsis-op-target cursor-pointer"
           >{gettext(item.handled.toString())}</p></td>
         </tr>
       );
@@ -92,25 +92,25 @@ class AbuseReports extends Component {
             <div className="cur-view-content">
               <table className={`table-hover${isDesktop ? '' : ' table-thead-hidden'}`}>
                 <thead>
-                {isDesktop ?
+                  {isDesktop ?
-                  <tr>
+                    <tr>
-                    <th width="20%">{gettext("Library")}</th>
+                      <th width="20%">{gettext('Library')}</th>
-                    <th width="20%">{gettext("File")}</th>
+                      <th width="20%">{gettext('File')}</th>
-                    <th width="10%">{gettext("Reporter")}</th>
+                      <th width="10%">{gettext('Reporter')}</th>
-                    <th width="15%">{gettext("Abuse Type")}</th>
+                      <th width="15%">{gettext('Abuse Type')}</th>
-                    <th width="20%">{gettext("Description")}</th>
+                      <th width="20%">{gettext('Description')}</th>
-                    <th width="10%">{gettext("Time")}</th>
+                      <th width="10%">{gettext('Time')}</th>
-                    <th width="5%">{gettext("Handled")}</th>
+                      <th width="5%">{gettext('Handled')}</th>
-                  </tr>
+                    </tr>
-                  :
+                    :
-                  <tr>
+                    <tr>
-                    <th width="92%"></th>
+                      <th width="92%"></th>
-                    <th width="8%"></th>
+                      <th width="8%"></th>
-                  </tr>
+                    </tr>
-                }
+                  }
                 </thead>
                 <tbody>
-                {AbuseReportList}
+                  {AbuseReportList}
                 </tbody>
               </table>
             </div>

frontend/src/pages/sys-admin/groups/groups-content.js

@@ -6,10 +6,10 @@ import { siteRoot, gettext } from '../../../utils/constants';
 import Loading from '../../../components/loading';
 import EmptyTip from '../../../components/empty-tip';
 import Paginator from '../../../components/paginator';
+import OpMenu from '../../../components/dialog/op-menu';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import SysAdminTransferGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog';
 import UserLink from '../user-link';
-import OpMenu from './op-menu';
 
 class Content extends Component {
 
@@ -162,9 +162,23 @@ class Item extends Component {
     this.props.transferGroup(this.props.item.id, receiver);
   }
 
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      case 'Transfer':
+        translateResult = gettext('Transfer');
+        break;
+    }   
+
+    return translateResult;
+  }
+
   render() {
-    const { isOpIconShown, isDeleteDialogOpen, isTransferDialogOpen } = this.state;
     const { item } = this.props;
+    const { isOpIconShown, isDeleteDialogOpen, isTransferDialogOpen } = this.state;
 
     let groupName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
     let deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', groupName);
@@ -189,6 +203,8 @@ class Item extends Component {
           <td>
             {(isOpIconShown && item.owner != 'system admin') &&
             <OpMenu
+              operations={['Delete', 'Transfer']}
+              translateOperations={this.translateOperations}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

frontend/src/pages/sys-admin/groups/op-menu.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      case 'Transfer':
-        translateResult = gettext('Transfer');
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    const operations = ['Delete', 'Transfer'];
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;

frontend/src/pages/sys-admin/institutions/institution-admins.js

@@ -6,11 +6,11 @@ import { loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import OpMenu from '../../../components/dialog/op-menu';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
 import MainPanelTopbar from '../main-panel-topbar';
 import InstitutionNav from './institution-nav';
-import OpMenu from './user-op-menu';
 
 class Content extends Component {
 
@@ -83,7 +83,6 @@ class Item extends Component {
       highlight: false,
       isRevokeAdminDialogOpen: false,
     };
-    this.operations = ['Revoke Admin'];
   }
 
   handleMouseEnter = () => {
@@ -137,6 +136,16 @@ class Item extends Component {
     }
   }
 
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Revoke Admin':
+        translateResult = gettext('Revoke Admin');
+        break;
+    }   
+    return translateResult;
+  }
+
   render() {
     const { item } = this.props;
     const { isOpIconShown, isRevokeAdminDialogOpen } = this.state;
@@ -157,7 +166,8 @@ class Item extends Component {
           <td>
             {isOpIconShown &&
             <OpMenu
-              operations={this.operations}
+              operations={['Revoke Admin']}
+              translateOperations={this.translateOperations}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

frontend/src/pages/sys-admin/institutions/institution-users.js

@@ -8,12 +8,12 @@ import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
+import OpMenu from '../../../components/dialog/op-menu';
 import AddMemberDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
 import MainPanelTopbar from '../main-panel-topbar';
 import InstitutionNav from './institution-nav';
-import OpMenu from './user-op-menu';
 
 class Content extends Component {
 
@@ -103,11 +103,6 @@ class Item extends Component {
       highlight: false,
       isSetAdminDialogOpen: false,
     };
-    if (this.props.item.is_institution_admin) {
-      this.operations = ['Delete'];
-    } else {
-      this.operations = ['Set Admin', 'Delete'];
-    }
   }
 
   handleMouseEnter = () => {
@@ -153,16 +148,41 @@ class Item extends Component {
         this.props.deleteUser(this.props.item.email);
         break;
       case 'Set Admin':
-        this.props.setAdmin(this.props.item.email);
+        this.toggleSetAdminDialog();
-        this.operations = ['Delete'];
         break;
     }
   }
 
+  getOperations = () => {
+    let operations = [];
+    if (!this.props.item.is_institution_admin) {
+      operations.push('Set Admin');
+    }
+    operations.push('Delete');
+    return operations;
+  }
+
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      case 'Set Admin':
+        translateResult = gettext('Set Admin');
+        break;
+    }   
+
+    return translateResult;
+  }
+
   render() {
     const { item } = this.props;
     const { isOpIconShown, isSetAdminDialogOpen } = this.state;
 
+    const itemName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
+    const dialogMsg = gettext('Are you sure you want to set {placeholder} as Admin?').replace('{placeholder}', itemName);
+
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -179,7 +199,8 @@ class Item extends Component {
           <td>
             {isOpIconShown &&
               <OpMenu
-                operations={this.operations}
+                operations={this.getOperations()}
+                translateOperations={this.translateOperations}
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.props.onFreezedItem}
                 onUnfreezedItem={this.onUnfreezedItem}
@@ -190,9 +211,10 @@ class Item extends Component {
         {isSetAdminDialogOpen &&
           <CommonOperationConfirmationDialog
             title={gettext('Set Admin')}
-            message={gettext('Sure?')}
+            message={dialogMsg}
             executeOperation={this.setAdmin}
             toggleDialog={this.toggleSetAdminDialog}
+            confirmBtnText={gettext('Set Admin')}
           />
         }
       </Fragment>

frontend/src/pages/sys-admin/institutions/user-op-menu.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  operations: PropTypes.array.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      case 'Set Admin':
-        translateResult = gettext('Set Admin');
-        break;
-      case 'Revoke Admin':
-        translateResult = gettext('Revoke Admin');
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {this.props.operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;

frontend/src/pages/sys-admin/invitations/invitations.js

@@ -1,17 +1,16 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from '@reach/router';
 import { Button } from 'reactstrap';
 import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { gettext, siteRoot, loginUrl } from '../../../utils/constants';
+import { gettext, loginUrl } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
+import OpMenu from '../../../components/dialog/op-menu';
 import MainPanelTopbar from '../main-panel-topbar';
 import UserLink from '../user-link';
-import OpMenu from './op-menu';
 
 class Content extends Component {
 

frontend/src/pages/sys-admin/main-panel-topbar.js

@@ -18,7 +18,7 @@ class MainPanelTopbar extends Component {
           </div>
         </div>
         <div className="common-toolbar">
-         {this.props.search && this.props.search}
+          {this.props.search && this.props.search}
           <Account isAdminPanel={true} />
         </div>
       </div>

frontend/src/pages/sys-admin/notifications/notifications.js

@@ -6,10 +6,10 @@ import { loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import OpMenu from '../../../components/dialog/op-menu';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import SysAdminAddSysNotificationDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-sys-notification-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
-import OpMenu from './op-menu';
 
 class Content extends Component {
 
@@ -132,6 +132,31 @@ class Item extends Component {
     }
   }
 
+  translateOperations = (item) => {
+    let translateResult = '';
+    switch (item) {
+      case 'Set to current':
+        translateResult = gettext('Set to current');
+        break;
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      default:
+        break;
+    }   
+    return translateResult;
+  } 
+
+  getOperations = () => {
+    const { item } = this.props;
+    let operations = [];
+    if (!item.is_current) {
+      operations.push('Set to current');
+    }
+    operations.push('Delete');
+    return operations;
+  }
+
   render() {
     const { item } = this.props;
     const { isOpIconShown, isDeleteDialogOpen } = this.state;
@@ -148,7 +173,8 @@ class Item extends Component {
           <td>
             {isOpIconShown &&
             <OpMenu
-              item={item}
+              operations={this.getOperations()}
+              translateOperations={this.translateOperations}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

frontend/src/pages/sys-admin/notifications/op-menu.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  item: PropTypes.object.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Set to current':
-        translateResult = gettext('Set to current');
-        break;
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      default:
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    const { item } = this.props;
-    let operations = [];
-    if (!item.is_current) {
-      operations.push('Set to current');
-    }
-    operations.push('Delete');
-
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;

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

@@ -24,7 +24,7 @@ class Nav extends React.Component {
   render() {
     const { currentItem, orgID, orgName } = this.props;
     return (
-     <div>
+      <div>
         <div className="cur-view-path">
           <h3 className="sf-heading"><Link to={`${siteRoot}sys/organizations/`}>{gettext('Organizations')}</Link> / {orgName}</h3>
         </div>

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

@@ -10,10 +10,10 @@ import Loading from '../../../components/loading';
 import SysAdminUserStatusEditor from '../../../components/select-editor/sysadmin-user-status-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';
 import MainPanelTopbar from '../main-panel-topbar';
 import UserLink from '../user-link';
 import OrgNav from './org-nav';
-import OpMenu from './user-op-menu';
 
 class Content extends Component {
 
@@ -160,6 +160,20 @@ class Item extends Component {
     }); 
   }
 
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      case 'Reset Password':
+        translateResult = gettext('Reset Password');
+        break;
+    }   
+
+    return translateResult;
+  }
+
   render() {
     const { item } = this.props;
     const { isOpIconShown, isDeleteDialogOpen, isResetPasswordDialogOpen } = this.state;
@@ -188,6 +202,8 @@ class Item extends Component {
           <td>
             {(isOpIconShown && item.email != username) &&
             <OpMenu
+              operations={['Delete', 'Reset Password']}
+              translateOperations={this.translateOperations}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

frontend/src/pages/sys-admin/orgs/user-op-menu.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      case 'Reset Password':
-        translateResult = gettext('Reset Password');
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    const operations = ['Delete', 'Reset Password'];
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;

frontend/src/pages/sys-admin/repos/dir-path-bar.js

@@ -52,8 +52,8 @@ class DirPath extends React.Component {
     return (
       <div className="path-container">
         {isSystemRepo ?
-        <a href={`${siteRoot}sys/system-library/`}>{gettext('System')}</a> :
+          <a href={`${siteRoot}sys/system-library/`}>{gettext('System')}</a> :
-        <a href={`${siteRoot}sys/all-libraries/`}>{gettext('All')}</a>
+          <a href={`${siteRoot}sys/all-libraries/`}>{gettext('All')}</a>
         }
         <span className="path-split">/</span>
         {(currentPath === '/' || currentPath === '') ?

frontend/src/pages/sys-admin/repos/repo-op-menu.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  repo: PropTypes.object.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class RepoOpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Share':
-        translateResult = gettext('Share');
-        break;
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      case 'Transfer':
-        translateResult = gettext('Transfer');
-        break;
-      case 'History Setting':
-        translateResult = gettext('History Setting');
-        break;
-      default:
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    const repo = this.props.repo;
-    let operations = ['Delete', 'Transfer'];
-    if (!repo.encrypted) {
-      operations.push('Share');
-    }
-    operations.push('History Setting');
-
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-RepoOpMenu.propTypes = propTypes;
-
-export default RepoOpMenu;

frontend/src/pages/sys-admin/repos/repos.js

@@ -8,12 +8,12 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import ModalPortal from '../../../components/modal-portal';
+import OpMenu from '../../../components/dialog/op-menu';
 import TransferDialog from '../../../components/dialog/transfer-dialog';
 import DeleteRepoDialog from '../../../components/dialog/delete-repo-dialog';
 import SysAdminShareDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-share-dialog';
 import SysAdminLibHistorySettingDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog';
 import UserLink from '../user-link';
-import RepoOpMenu from './repo-op-menu';
 
 const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;
 
@@ -210,11 +210,46 @@ class Item extends Component {
     }
   }
 
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Share':
+        translateResult = gettext('Share');
+        break;
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      case 'Transfer':
+        translateResult = gettext('Transfer');
+        break;
+      case 'History Setting':
+        translateResult = gettext('History Setting');
+        break;
+      default:
+        break;
+    }   
+
+    return translateResult;
+  }
+
+  getOperations = () => {
+    const { repo } = this.props;
+    let operations = ['Delete', 'Transfer'];
+    if (!repo.encrypted) {
+      operations.push('Share');
+    }
+    operations.push('History Setting');
+    return operations;
+  }
+
   render () {
-    let { repo } = this.props;
+    const { repo } = this.props;
-    let { isOpIconShown,
+    const { 
-      isShareDialogOpen, isDeleteDialogOpen, 
+      isOpIconShown,
-      isTransferDialogOpen, isHistorySettingDialogOpen
+      isShareDialogOpen,
+      isDeleteDialogOpen, 
+      isTransferDialogOpen,
+      isHistorySettingDialogOpen
     } = this.state;
     let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
@@ -235,8 +270,9 @@ class Item extends Component {
           </td>
           <td>
             {(!isGroupOwnedRepo && isOpIconShown) &&
-            <RepoOpMenu
+            <OpMenu
-              repo={repo}
+              operations={this.getOperations()}
+              translateOperations={this.translateOperations}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

frontend/src/pages/sys-admin/statistic/picker.js

@@ -11,7 +11,7 @@ const propsTypes = {
   disabledDate: PropTypes.func.isRequired,
   value: PropTypes.object,
   onChange: PropTypes.func.isRequired,
-}
+};
 
 const FORMAT = 'YYYY-MM-DD';
 
@@ -41,21 +41,21 @@ class Picker extends React.Component {
         value={props.value}
         onChange={props.onChange}
       >
-      {
+        {
-        ({value}) => {
+          ({value}) => {
-          return (
+            return (
-            <span>
+              <span>
-              <input 
+                <input 
-                placeholder="yyyy-mm-dd"
+                  placeholder="yyyy-mm-dd"
-                tabIndex="-1"
+                  tabIndex="-1"
-                readOnly
+                  readOnly
-                value={value && value.format(FORMAT) || ''}
+                  value={value && value.format(FORMAT) || ''}
-                className="form-control system-statistic-input"
+                  className="form-control system-statistic-input"
-              />
+                />
-            </span>
+              </span>
-          );
+            );
+          }
         }
-      }
       </DatePicker>
     );
   }

frontend/src/pages/sys-admin/statistic/statistic-common-tool.js

@@ -64,7 +64,7 @@ class StatisticCommonTool extends React.Component {
     const endValue = this.state.endValue;
     if (!endValue) {
       let startTime = moment(startValue).format();
-      return today < startTime
+      return today < startTime;
     }
     return endValue.isBefore(startValue) || moment(startValue).format() > today;
   }

frontend/src/pages/sys-admin/statistic/traffic-organizations-table.js

@@ -70,7 +70,7 @@ class TrafficOrganizationsTable extends React.Component {
     this.setState({
       userTrafficList: newUserTrafficList,
       sortOrder: sortOrder
-    })
+    });
   }
 
   onGenerateReports = (month, page) => {

frontend/src/pages/sys-admin/statistic/traffic-table.js

@@ -13,7 +13,7 @@ class TrafficTable extends React.Component {
     super(props);
     this.state = {
       showIconName: 'link_file_download'
-    }
+    };
   }
 
   componentDidMount() {
@@ -41,7 +41,7 @@ class TrafficTable extends React.Component {
     let newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
     this.setState({
       showIconName: sortByType
-    })
+    });
 
     this.props.sortBySize(sortByType, newSortOrder);
   }

frontend/src/pages/sys-admin/statistic/traffic-user-table.js

@@ -53,7 +53,7 @@ class TrafficOrganizationsTable extends React.Component {
     this.setState({
       userTrafficList: newUserTrafficList,
       sortOrder: sortOrder
-    })
+    });
   }
 
   handleKeyPress = (e) => {

frontend/src/pages/sys-admin/terms-and-conditions/item.js

@@ -18,7 +18,7 @@ const propsTypes = {
   onUnfreezedItem: PropTypes.func.isRequired,
   deleteTerm: PropTypes.func.isRequired,
   updateTerm: PropTypes.func.isRequired,
-}
+};
 
 class Item extends Component {
 
@@ -78,7 +78,7 @@ class Item extends Component {
   }
 
   toggleTermsContentDialog = (e) => {
-    this.setState({isTermsPerviewDialogOpen: !this.state.isTermsPerviewDialogOpen})
+    this.setState({isTermsPerviewDialogOpen: !this.state.isTermsPerviewDialogOpen});
   }
 
   onMenuItemClick = (operation) => {

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

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import Users from './users'
+import Users from './users';
 
 class AdminUsers extends Component {
   

frontend/src/pages/sys-admin/users/ldap-imported-users.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import Users from './users'
+import Users from './users';
 
 class LDAPImportedUsers extends Component {
   

frontend/src/pages/sys-admin/users/ldap-users.js

@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from '@reach/router';
 import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';

frontend/src/pages/sys-admin/users/user-groups.js

@@ -7,10 +7,10 @@ import { siteRoot, loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import OpMenu from '../../../components/dialog/op-menu';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
 import Nav from './user-nav';
-import OpMenu from './user-op-menu';
 
 class Content extends Component {
 

frontend/src/pages/sys-admin/users/user-links.js

@@ -5,10 +5,10 @@ import { loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import OpMenu from '../../../components/dialog/op-menu';
 import LinkDialog from '../../../components/dialog/share-admin-link';
 import MainPanelTopbar from '../main-panel-topbar';
 import Nav from './user-nav';
-import OpMenu from './user-op-menu';
 
 class Content extends Component {
 

frontend/src/pages/sys-admin/users/user-op-menu.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  render() {
-    const { operations, translateOperations } = this.props;
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;

frontend/src/pages/sys-admin/users/user-repos.js

@@ -9,9 +9,9 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import TransferDialog from '../../../components/dialog/transfer-dialog';
+import OpMenu from '../../../components/dialog/op-menu';
 import MainPanelTopbar from '../main-panel-topbar';
 import Nav from './user-nav';
-import OpMenu from './user-op-menu';
 
 const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;
 

frontend/src/pages/sys-admin/users/user-shared-repos.js

@@ -4,15 +4,11 @@ import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { isPro, siteRoot, loginUrl, gettext } from '../../../utils/constants';
-import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
-import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
-import TransferDialog from '../../../components/dialog/transfer-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
 import UserLink from '../user-link';
 import Nav from './user-nav';
-import OpMenu from './user-op-menu';
 
 const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;
 

frontend/src/pages/sys-admin/users/users-content.js

@@ -11,10 +11,10 @@ import Paginator from '../../../components/paginator';
 import SysAdminUserStatusEditor from '../../../components/select-editor/sysadmin-user-status-editor';
 import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-user-role-editor';
 import SelectEditor from '../../../components/select-editor/select-editor';
+import OpMenu from '../../../components/dialog/op-menu';
 import SysAdminUserSetQuotaDialog from '../../../components/dialog/sysadmin-dialog/set-quota';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
-import OpMenu from './user-op-menu';
 
 const { availableRoles, availableAdminRoles, institutions } = window.sysadmin.pageOptions;
 

frontend/src/pages/sys-admin/virus-scan-records.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
-import toaster from '../../components/toast'
+import toaster from '../../components/toast';
 import Account from '../../components/common/account';
 
 
@@ -46,8 +46,8 @@ class RecordItem extends Component {
         <td>
           {
             this.state.handleStatus ?
-            <span style={{color: "green"}}>{gettext('Handled')}</span> :
+              <span style={{color: 'green'}}>{gettext('Handled')}</span> :
-            <a style={{color: "red", cursor: "pointer"}} onClick={this.deleteVirusScanRecord}>{gettext('Delete')}</a>
+              <a style={{color: 'red', cursor: 'pointer'}} onClick={this.deleteVirusScanRecord}>{gettext('Delete')}</a>
           }
         </td>
       </tr>