[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/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/invitations/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;