sysadmin reconstruct institutions pages (#4213)

* sysadmin reconstruct institutions pages

* optimize code

* optimize seafile js api name sysAdminAddInstitutionUserBatch

* update seafile-js

frontend/package-lock.json

@@ -11386,9 +11386,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.134",
+      "version": "0.2.136",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.134.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.136.tgz",
-      "integrity": "sha512-QXm20Mp7/bcQAuBncVAmlN+mO3MblfeSePnnw6+QaLsbDcYpvZqOWUVm6MTFKHouvdvDWaSUBoUKoJ1ozRXL+g==",
+      "integrity": "sha512-0/MYJrLRHwU7tKawbtNVfVXG+tk1rfUiYC8fiWMfsyDDhXwXEmqGaKMJuYqDU2rpAyqgpyTZLUX43UXmZF9Kiw==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",

frontend/package.json

@@ -41,7 +41,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.134",
+    "seafile-js": "^0.2.136",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Input } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  addInstitution: PropTypes.func.isRequired
+};
+
+class SysAdminAddInstitutionDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      isSubmitBtnActive: false
+    };
+  }
+
+  handleChange = (e) => {
+    const value = e.target.value;
+    if (!value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
+    this.setState({value: value});
+  }
+
+  handleSubmit = () => {
+    this.toggle();
+    this.props.addInstitution(this.state.value.trim());
+  }
+
+  toggle = () => {
+    this.props.toggle();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Add institution')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <p>{gettext('Name')}</p>
+            <FormGroup>
+              <Input
+                value={this.state.value}
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SysAdminAddInstitutionDialog.propTypes = propTypes;
+
+export default SysAdminAddInstitutionDialog;

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import UserSelect from '../../user-select.js';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  addUser: PropTypes.func.isRequired
+};
+
+class AddMemberDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: [],
+    };
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({ selectedOption: option });
+  }
+
+  handleSubmit = () => {
+    if (!this.state.selectedOption) return;
+    const emails = this.state.selectedOption.map(item => item.email);
+    this.props.addUser(emails)
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <ModalBody>
+          <UserSelect
+            placeholder={gettext('Select users...')}
+            onSelectChange={this.handleSelectChange}
+            isMulti={true}
+            className='org-add-member-select'
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+AddMemberDialog.propTypes = propTypes;
+
+export default AddMemberDialog;

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

@@ -43,6 +43,11 @@ import OrgUsers from './orgs/org-users';
 import OrgGroups from './orgs/org-groups';
 import OrgRepos from './orgs/org-repos';
 
+import Institutions from './institutions/institutions';
+import InstitutionInfo from './institutions/institution-info';
+import InstitutionUsers from './institutions/institution-users';
+import InstitutionAdmins from './institutions/institution-admins';
+
 import LoginLogs from './logs-page/login-logs';
 import FileAccessLogs from './logs-page/file-access-logs';
 import FileUpdateLogs from './logs-page/file-update-logs';
@@ -162,6 +167,10 @@ class SysAdmin extends React.Component {
             <OrgUsers path={siteRoot + 'sys/organizations/:orgID/users'} />
             <OrgGroups path={siteRoot + 'sys/organizations/:orgID/groups'} />
             <OrgRepos path={siteRoot + 'sys/organizations/:orgID/libraries'} />
+            <Institutions path={siteRoot + 'sys/institutions'} />
+            <InstitutionInfo path={siteRoot + 'sys/institutions/:institutionID/info'} />
+            <InstitutionUsers path={siteRoot + 'sys/institutions/:institutionID/members'} />
+            <InstitutionAdmins path={siteRoot + 'sys/institutions/:institutionID/admins'} />
             <LoginLogs path={siteRoot + 'sys/logs/login'} />
             <FileAccessLogs path={siteRoot + 'sys/logs/file-access'} />
             <FileUpdateLogs path={siteRoot + 'sys/logs/file-update'} />

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

@@ -0,0 +1,278 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { 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 MainPanelTopbar from '../main-panel-topbar';
+import InstitutionNav from './institution-nav';
+import OpMenu from './user-op-menu';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  render() {
+    const { loading, errorMsg, items } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No admins')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table>
+            <thead>
+              <tr>
+                <th width="25%">{gettext('Name')}</th>
+                <th width="10%">{gettext('Status')}</th>
+                <th width="20%">{gettext('Space Used')}</th>
+                <th width="40%">{gettext('Created At')}{' / '}{gettext('Last Login')}</th>
+                <th width="5%">{/* Operations */}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  item={item}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  revokeAdmin={this.props.revokeAdmin}
+                  deleteUser={this.props.deleteUser}
+                />);
+              })}
+            </tbody>
+          </table>
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      highlight: false,
+      isRevokeAdminDialogOpen: false,
+    };
+  }
+
+  handleMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      }); 
+    }   
+  }
+
+  handleMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      }); 
+    }   
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  toggleRevokeAdminDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen});
+  }
+
+  revokeAdmin = () => {
+    this.props.revokeAdmin(this.props.item.email);
+  }
+
+  onMenuItemClick = (operation) => {
+    switch (operation) {
+      case 'Delete':
+        this.props.deleteUser(this.props.item.email);
+        break;
+      case 'Set Admin':
+        this.props.setAdmin(this.props.item.email);
+        break;
+      case 'Revoke Admin':
+        this.props.revokeAdmin(this.props.item.email);
+        break;
+    }
+  }
+
+  render() {
+    const { item } = this.props;
+    const { isOpIconShown, isRevokeAdminDialogOpen } = this.state;
+
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td>
+            {item.is_active ? gettext('Active') : gettext('Inactive')}
+          </td>
+          <td>{`${Utils.bytesToSize(item.quota_usage)} / ${item.quota_total > 0 ? Utils.bytesToSize(item.quota_total) : '--'}`}</td>
+          <td>
+            {moment(item.create_time).format('YYYY-MM-DD hh:mm:ss')}{' / '}{item.last_login ? moment(item.last_login).fromNow() : '--'}
+          </td>
+          <td>
+            {isOpIconShown &&
+            <OpMenu
+              isInstitutionAdmin={item.is_institution_admin}
+              onMenuItemClick={this.onMenuItemClick}
+              onFreezedItem={this.props.onFreezedItem}
+              onUnfreezedItem={this.onUnfreezedItem}
+            />
+            }
+          </td>
+        </tr>
+        {isRevokeAdminDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Revoke Admin')}
+            message={gettext('Sure ?')}
+            executeOperation={this.revokeAdmin}
+            toggleDialog={this.toggleRevokeAdminDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+class InstitutionAdmins extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      institutionName: '',
+      userList: [],
+      isAddUserDialogOpen: false
+    };
+  }
+
+  componentDidMount () {
+    seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
+      this.setState({
+        institutionName: res.data.name
+      });
+    });
+    seafileAPI.sysAdminListInstitutionAdmins(this.props.institutionID).then((res) => {
+      this.setState({
+        loading: false,
+        userList: res.data.user_list,
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+  
+  revokeAdmin = (email) => {
+    seafileAPI.sysAdminUpdateInstitutionUser(this.props.institutionID, email, false).then(res => {
+      let userList = this.state.userList.filter(user => {
+        return user.email != email
+      });
+      this.setState({userList: userList});
+      toaster.success(gettext('Success'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteUser = (email) => {
+    seafileAPI.sysAdminDeleteInstitutionUser(this.props.institutionID, email).then(res => {
+      let newUserList = this.state.userList.filter(user => {
+        return user.email != email;
+      });
+      this.setState({userList: newUserList});
+      toaster.success('success');
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { institutionName } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <InstitutionNav 
+              currentItem="admins"
+              institutionID={this.props.institutionID} 
+              institutionName={institutionName}
+            />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.userList}
+                revokeAdmin={this.revokeAdmin}
+                deleteUser={this.deleteUser}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default InstitutionAdmins;

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

@@ -0,0 +1,149 @@
+import React, { Component, Fragment } from 'react';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import Loading from '../../../components/loading';
+import SysAdminSetInstitutionQuotaDialog from '../../../components/dialog/sysadmin-dialog/set-quota';
+import MainPanelTopbar from '../main-panel-topbar';
+import InstitutionNav from './institution-nav';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSetQuotaDialogOpen: false,
+    };
+  }
+
+  toggleSetQuotaDialog = () => {
+    this.setState({isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen});
+  }
+
+  showEditIcon = (action) => {
+    return (
+      <span
+        title={gettext('Edit')}
+        className="fa fa-pencil-alt attr-action-icon"
+        onClick={action}>
+      </span>
+    );
+  }
+
+  render() {
+    const { loading, errorMsg, institutionInfo } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const { name, user_count, quota_total, quota_used } = institutionInfo;
+      const { isSetQuotaDialogOpen } = this.state;
+      return (
+        <Fragment>
+          <dl className="m-0">
+            <dt className="info-item-heading">{gettext('Name')}</dt>
+            <dd className="info-item-content">
+              {name}
+            </dd>
+
+            <dt className="info-item-heading">{gettext('Number of members')}</dt>
+            <dd className="info-item-content">{user_count}</dd>
+
+            <dt className="info-item-heading">{gettext('Space Used')}</dt>
+            <dd className="info-item-content">
+              {`${Utils.bytesToSize(quota_used)} / ${quota_total > 0 ? Utils.bytesToSize(quota_total) : '--'}`}
+              {this.showEditIcon(this.toggleSetQuotaDialog)}
+            </dd>
+          </dl>
+          {isSetQuotaDialogOpen &&
+          <SysAdminSetInstitutionQuotaDialog
+            updateQuota={this.props.updateQuota}
+            toggle={this.toggleSetQuotaDialog}
+          />
+          }
+        </Fragment>
+      );
+    }
+  }
+}
+
+class InstitutionInfo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      institutionInfo: {}
+    };
+  }
+
+  componentDidMount () {
+    seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
+      this.setState({
+        loading: false,
+        institutionInfo: res.data
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  updateQuota = (quota) => {
+    seafileAPI.sysAdminUpdateInstitution(this.props.institutionID, quota).then(res => {
+      const newInstitutionInfo = Object.assign(this.state.institutionInfo, {
+        quota_total: res.data.quota_total,
+      });
+      this.setState({institutionInfo: newInstitutionInfo});
+      toaster.success(gettext('Successfully set quota.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    }); 
+  }
+
+
+  render() {
+    const { institutionInfo } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <InstitutionNav currentItem="info" institutionID={this.props.institutionID} institutionName={institutionInfo.name} />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                institutionInfo={this.state.institutionInfo}
+                updateQuota={this.updateQuota}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default InstitutionInfo;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../../../utils/constants';
+
+const propTypes = {
+  currentItem: PropTypes.string.isRequired
+};
+
+class Nav extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.navItems = [
+      {name: 'info', urlPart: 'info', text: gettext('Info')},
+      {name: 'members', urlPart: 'members', text: gettext('Members')},
+      {name: 'admins', urlPart: 'admins', text: gettext('Admins')},
+    ];
+  }
+
+  render() {
+    const { currentItem, institutionID, institutionName } = this.props;
+    return (
+      <div>
+        <div className="cur-view-path">
+          <h3 className="sf-heading"><Link to={`${siteRoot}sys/institutions/`}>{gettext('Institutions')}</Link> / {institutionName}</h3>
+        </div>
+        <ul className="nav border-bottom mx-4">
+          {this.navItems.map((item, index) => {
+            return (
+              <li className="nav-item mr-2" key={index}>
+                <Link to={`${siteRoot}sys/institutions/${institutionID}/${item.urlPart}/`} className={`nav-link ${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+}
+
+Nav.propTypes = propTypes;
+
+export default Nav;

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

@@ -0,0 +1,395 @@
+import React, { Component, Fragment } from 'react';
+import { Button } from 'reactstrap';
+import moment from 'moment';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { siteRoot, loginUrl, gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import EmptyTip from '../../../components/empty-tip';
+import Loading from '../../../components/loading';
+import AddMemberDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog';
+import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import MainPanelTopbar from '../main-panel-topbar';
+import InstitutionNav from './institution-nav';
+import Paginator from '../../../components/paginator';
+import OpMenu from './user-op-menu';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  getPreviousPage = () => {
+    this.props.getInstitutionUsersByPage(this.props.currentPage - 1);
+  }
+
+  getNextPage = () => {
+    this.props.getInstitutionUsersByPage(this.props.currentPage + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, perPage, currentPage, hasNextPage } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No members')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table>
+            <thead>
+              <tr>
+                <th width="25%">{gettext('Name')}</th>
+                <th width="10%">{gettext('Status')}</th>
+                <th width="20%">{gettext('Space Used')}</th>
+                <th width="40%">{gettext('Created At')}{' / '}{gettext('Last Login')}</th>
+                <th width="5%">{/* Operations */}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  item={item}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  setAdmin={this.props.setAdmin}
+                  revokeAdmin={this.props.revokeAdmin}
+                  deleteUser={this.props.deleteUser}
+                />);
+              })}
+            </tbody>
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+            currentPage={currentPage}
+            hasNextPage={hasNextPage}
+            canResetPerPage={true}
+            curPerPage={perPage}
+            resetPerPage={this.props.resetPerPage}
+          />
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      highlight: false,
+      isSetAdminDialogOpen: false,
+      isRevokeAdminDialogOpen: false,
+    };
+  }
+
+  handleMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      }); 
+    }   
+  }
+
+  handleMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      }); 
+    }   
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  toggleSetAdminDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isSetAdminDialogOpen: !this.state.isSetAdminDialogOpen});
+  }
+
+  toggleRevokeAdminDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen});
+  }
+
+  setAdmin = () => {
+    this.props.setAdmin(this.props.item.email);
+  }
+
+  revokeAdmin = () => {
+    this.props.revokeAdmin(this.props.item.email);
+  }
+
+  onMenuItemClick = (operation) => {
+    switch (operation) {
+      case 'Delete':
+        this.props.deleteUser(this.props.item.email);
+        break;
+      case 'Set Admin':
+        this.props.setAdmin(this.props.item.email);
+        break;
+      case 'Revoke Admin':
+        this.props.revokeAdmin(this.props.item.email);
+        break;
+    }
+  }
+
+  render() {
+    const { item } = this.props;
+    const { isOpIconShown, isSetAdminDialogOpen, isRevokeAdminDialogOpen } = this.state;
+
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td>
+            {item.is_active ? gettext('Active') : gettext('Inactive')}
+          </td>
+          <td>{`${Utils.bytesToSize(item.quota_usage)} / ${item.quota_total > 0 ? Utils.bytesToSize(item.quota_total) : '--'}`}</td>
+          <td>
+            {moment(item.create_time).format('YYYY-MM-DD hh:mm:ss')}{' / '}{item.last_login ? moment(item.last_login).fromNow() : '--'}
+          </td>
+          <td>
+            {isOpIconShown &&
+              <OpMenu
+                isInstitutionAdmin={item.is_institution_admin}
+                onMenuItemClick={this.onMenuItemClick}
+                onFreezedItem={this.props.onFreezedItem}
+                onUnfreezedItem={this.onUnfreezedItem}
+              />
+            }
+          </td>
+        </tr>
+        {isSetAdminDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Set Admin')}
+            message={gettext('Sure?')}
+            executeOperation={this.setAdmin}
+            toggleDialog={this.toggleSetAdminDialog}
+          />
+        }
+        {isRevokeAdminDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Revoke Admin')}
+            message={gettext('Sure?')}
+            executeOperation={this.revokeAdmin}
+            toggleDialog={this.toggleRevokeAdminDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+class InstitutionUsers extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      institutionName: '',
+      userList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isAddUserDialogOpen: false
+    };
+    this.initPage = 1;
+  }
+
+  componentDidMount () {
+    seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
+      this.setState({
+        institutionName: res.data.name
+      });
+    });
+    this.getInstitutionUsersByPage(this.initPage);
+  }
+
+  getInstitutionUsersByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListInstitutionUsers(this.props.institutionID, page, perPage).then((res) => {
+      this.setState({
+        loading: false,
+        userList: res.data.user_list,
+        currentPage: page,
+        hasNextPage: Utils.hasNextPage(page, perPage, res.data.total_count),
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  setAdmin = (email) => {
+    seafileAPI.sysAdminUpdateInstitutionUser(this.props.institutionID, email, true).then(res => {
+      let userList = this.state.userList.map(user => {
+        if (user.email == email) {
+          user.is_institution_admin = true;
+        }
+        return user;
+      });
+      this.setState({userList: userList});
+      toaster.success(gettext('Success'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+  
+  revokeAdmin = (email) => {
+    seafileAPI.sysAdminUpdateInstitutionUser(this.props.institutionID, email, false).then(res => {
+      let userList = this.state.userList.map(user => {
+        if (user.email == email) {
+          user.is_institution_admin = false;
+        }
+        return user;
+      });
+      this.setState({userList: userList});
+      toaster.success(gettext('Success'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  toggleAddUserDialog = () => {
+    this.setState({isAddUserDialogOpen: !this.state.isAddUserDialogOpen});
+  }
+
+  resetPerPage = (newPerPage) => {
+    this.setState({
+      perPage: newPerPage,
+    }, () => this.getInstitutionUsersByPage(this.initPage));
+  }
+
+  addUser = (emails) => {
+    seafileAPI.sysAdminAddInstitutionUserBatch(this.props.institutionID, emails).then(res => {
+      let successArray = res.data.success;
+      let failedArray = res.data.failed;
+      let tipStr = gettext('Add {totalCount} members. {successCount} success, {failedCount} failed.')
+        .replace('{totalCount}', emails.length)
+        .replace('{successCount}', successArray.length)
+        .replace('{failedCount}', failedArray.length);
+      if (successArray.length > 0) {
+        toaster.success(tipStr);
+      } else {
+        toaster.danger(tipStr);
+      }
+      let newUserList = this.state.userList.concat(successArray);
+      this.setState({userList: newUserList});
+      this.toggleAddUserDialog();
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteUser = (email) => {
+    seafileAPI.sysAdminDeleteInstitutionUser(this.props.institutionID, email).then(res => {
+      let newUserList = this.state.userList.filter(user => {
+        return user.email != email;
+      });
+      this.setState({userList: newUserList});
+      toaster.success('success');
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { isAddUserDialogOpen, institutionName, hasNextPage, currentPage, perPage } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleAddUserDialog}>{gettext('Add Member')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <InstitutionNav
+              currentItem="members"
+              institutionID={this.props.institutionID} 
+              institutionName={institutionName}
+            />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.userList}
+                setAdmin={this.setAdmin}
+                revokeAdmin={this.revokeAdmin}
+                deleteUser={this.deleteUser}
+                currentPage={currentPage}
+                perPage={perPage}
+                hasNextPage={hasNextPage}
+                getInstitutionUsersByPage={this.getInstitutionUsersByPage}
+                resetPerPage={this.resetPerPage}
+              />
+            </div>
+          </div>
+        </div>
+        {isAddUserDialogOpen &&
+          <AddMemberDialog
+            addUser={this.addUser}
+            toggle={this.toggleAddUserDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default InstitutionUsers;

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

@@ -0,0 +1,261 @@
+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 { 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 MainPanelTopbar from '../main-panel-topbar';
+import SysAdminAddInstitutionDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog';
+import Paginator from '../../../components/paginator';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getPreviousPage = () => {
+    this.props.getInstitutionsByPage(this.props.currentPage - 1);
+  }
+
+  getNextPage = () => {
+    this.props.getInstitutionsByPage(this.props.currentPage + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, perPage, currentPage, hasNextPage } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No institutions')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="75%">{gettext('Name')}</th>
+                <th width="20%">{gettext('Created At')}</th>
+                <th width="5%">{/* Operations */}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  item={item}
+                  deleteInstitution={this.props.deleteInstitution}
+                />);
+              })}
+            </tbody>
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+            currentPage={currentPage}
+            hasNextPage={hasNextPage}
+            canResetPerPage={true}
+            curPerPage={perPage}
+            resetPerPage={this.props.resetPerPage}
+          />
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      isDeleteDialogOpen: false
+    };
+  }
+
+  handleMouseEnter = () => {
+    this.setState({isOpIconShown: true});
+  }
+
+  handleMouseLeave = () => {
+    this.setState({isOpIconShown: false});
+  }
+
+  toggleDeleteDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+  }
+
+  deleteInstitution = () => {
+    this.props.deleteInstitution(this.props.item.id);
+  }
+
+  render() {
+    const { item } = this.props;
+    const { isOpIconShown, isDeleteDialogOpen } = this.state;
+
+    const institutionName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
+    const deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', institutionName);
+
+    return (
+      <Fragment>
+        <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <td><Link to={`${siteRoot}sys/institutions/${item.id}/info/`}>{item.name}</Link></td>
+          <td>{moment(item.ctime).fromNow()}</td>
+          <td>
+            <a href="#" className={`action-icon sf2-icon-delete ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
+          </td>
+        </tr>
+        {isDeleteDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Delete Institution')}
+            message={deleteDialogMsg}
+            executeOperation={this.deleteInstitution}
+            confirmBtnText={gettext('Delete')}
+            toggleDialog={this.toggleDeleteDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+class Institutions extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      institutionList: [],
+      perPage: 100,
+      currentPage: 1,
+      hasNextPage: false,
+      isAddInstitutionDialogOpen: false,
+    };
+    this.initPage = 1;
+  }
+
+  componentDidMount () {
+    this.getInstitutionsByPage(this.initPage);
+  }
+
+  getInstitutionsByPage = (page) => {
+    let { perPage } = this.state;
+    seafileAPI.sysAdminListInstitutions(page, perPage).then((res) => {
+      this.setState({
+        loading: false,
+        institutionList: res.data.institution_list,
+        currentPage: page,
+        hasNextPage: Utils.hasNextPage(page, perPage, res.data.total_count),
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  resetPerPage = (newPerPage) => {
+    this.setState({
+      perPage: newPerPage,
+    }, () => this.getInstitutionsByPage(this.initPage));
+  }
+
+  toggleAddInstitutionDialog = () => {
+    this.setState({isAddInstitutionDialogOpen: !this.state.isAddInstitutionDialogOpen});
+  }
+
+  addInstitution = (name) => {
+    seafileAPI.sysAdminAddInstitution(name).then(res => {
+      let institutionList = this.state.institutionList;
+      institutionList.push(res.data);
+      this.setState({institutionList: institutionList});
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteInstitution = (institutionID) => {
+    seafileAPI.sysAdminDeleteInstitution(institutionID).then(res => {
+      let institutionList = this.state.institutionList.filter(inst => {
+        return inst.id != institutionID;
+      });
+      this.setState({institutionList: institutionList});
+      toaster.success(gettext('Successfully deleted 1 item.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { isAddInstitutionDialogOpen, hasNextPage, currentPage, perPage } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleAddInstitutionDialog}>{gettext('Add Institution')}</Button>
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Institutions')}</h3>
+            </div> 
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.institutionList}
+                deleteInstitution={this.deleteInstitution}
+                currentPage={currentPage}
+                perPage={perPage}
+                hasNextPage={hasNextPage}
+                getInstitutionsByPage={this.getInstitutionsByPage}
+                resetPerPage={this.resetPerPage}
+              />
+            </div>
+          </div>
+        </div>
+        {isAddInstitutionDialogOpen &&
+          <SysAdminAddInstitutionDialog
+            addInstitution={this.addInstitution}
+            toggle={this.toggleAddInstitutionDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default Institutions;

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

@@ -0,0 +1,90 @@
+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 = {
+  isInstitutionAdmin: PropTypes.bool.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() {
+    let operations = [];
+    if (this.props.isInstitutionAdmin) {
+      operations = ['Revoke Admin', 'Delete'];
+    } else {
+      operations = ['Set Admin', '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/side-panel.js

@@ -137,10 +137,14 @@ class SidePanel extends React.Component {
                 }
                 {multiInstitution && isDefaultAdmin &&
                   <li className="nav-item">
-                    <a className='nav-link ellipsis' href={siteRoot + 'sys/instadmin/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('institutions')}`}
+                      to={siteRoot + 'sys/institutions/'}
+                      onClick={() => this.props.tabItemClick('institutions')}
+                    >
                       <span className="sf2-icon-organization" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Institutions')}</span>
-                    </a>
+                    </Link>
                   </li>
                 }
                 {isDefaultAdmin &&

seahub/urls.py

@@ -704,6 +704,10 @@ urlpatterns = [
     url(r'^sys/organizations/(?P<org_id>\d+)/users/$', sysadmin_react_fake_view, name="sys_organization_users"),
     url(r'^sys/organizations/(?P<org_id>\d+)/groups/$', sysadmin_react_fake_view, name="sys_organization_groups"),
     url(r'^sys/organizations/(?P<org_id>\d+)/libraries/$', sysadmin_react_fake_view, name="sys_organization_repos"),
+    url(r'^sys/institutions/$', sysadmin_react_fake_view, name="sys_institutions"),
+    url(r'^sys/institutions/(?P<inst_id>\d+)/info/$', sysadmin_react_fake_view, name="sys_institution_info"),
+    url(r'^sys/institutions/(?P<inst_id>\d+)/members/$', sysadmin_react_fake_view, name="sys_institution_members"),
+    url(r'^sys/institutions/(?P<inst_id>\d+)/admins/$', sysadmin_react_fake_view, name="sys_institution_admins"),
     url(r'^sys/share-links/$', sysadmin_react_fake_view, name="sys_share_links"),
     url(r'^sys/upload-links/$', sysadmin_react_fake_view, name="sys_upload_links"),
     url(r'^sys/work-weixin/$', sysadmin_react_fake_view, name="sys_work_weixin"),