sysadmin reconstruct repo page (#3980)

frontend/src/components/dialog/common-operation-confirmation-dialog.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  confirmBtnText: PropTypes.string,
+  executeOperation: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class CommonOperationConfirmationDialog extends Component {
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  executeOperation = () => {
+    this.toggle();
+    this.props.executeOperation();
+  }
+
+  render() {
+    let { title, message, confirmBtnText } = this.props;
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
+        <ModalBody>
+          <p dangerouslySetInnerHTML={{__html: message}}></p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.executeOperation}>{confirmBtnText || gettext('Confirm')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+CommonOperationConfirmationDialog.propTypes = propTypes;
+
+export default CommonOperationConfirmationDialog;

frontend/src/components/dialog/delete-repo-dialog.js

@@ -23,7 +23,7 @@ class DeleteRepoDialog extends Component {
   render() {
 
     const repo = this.props.repo;
-    const repoName = '<span class="op-target">' + Utils.HTMLescape(repo.repo_name) + '</span>';
+    const repoName = '<span class="op-target">' + Utils.HTMLescape(repo.repo_name || repo.name) + '</span>';
     let message = gettext('Are you sure you want to delete %s ?');
     message = message.replace('%s', repoName);
 

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import UserSelect from '../../user-select';
+
+
+const propTypes = {
+  createRepo: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+};
+
+class SysAdminCreateRepoDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoName: '',
+      ownerEmail: '',
+      errMessage: '',
+      isSubmitBtnActive: false
+    };
+    this.newInput = React.createRef();
+  }
+
+  handleRepoNameChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
+    this.setState({repoName: e.target.value});
+  }
+
+  handleSubmit = () => {
+    const { repoName, ownerEmail } = this.state;
+    this.props.createRepo(repoName.trim(), ownerEmail);
+    this.toggle();
+  }
+
+  handleSelectChange = (option) => {
+    // option can be null
+    this.setState({
+      ownerEmail: option ? option.email : ''
+    });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+      e.preventDefault();
+    }
+  }
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="repoName">{gettext('Name')}</Label>
+              <Input 
+                id="repoName"
+                onKeyPress={this.handleKeyPress} 
+                innerRef={input => {this.newInput = input;}} 
+                value={this.state.repoName} 
+                onChange={this.handleRepoNameChange}
+              />
+            </FormGroup>
+            <FormGroup>
+              <Label for="userSelect">
+                {gettext('Owner')}
+                <span className="small text-secondary">{gettext('(If left blank, owner will be admin)')}</span>
+              </Label>
+              <UserSelect
+                id="userSelect"
+                isMulti={false}
+                className="reviewer-select"
+                placeholder={gettext('Select a user')}
+                onSelectChange={this.handleSelectChange}
+              />
+            </FormGroup>
+          </Form>
+          {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SysAdminCreateRepoDialog.propTypes = propTypes;
+
+export default SysAdminCreateRepoDialog;

frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api.js';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
+
+const propTypes = {
+  itemName: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+};
+
+class SysAdminLibHistorySettingDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      keepDays: -1,
+      expireDays: 30,
+      disabled: true,
+      allHistory: true,
+      noHistory: false,
+      autoHistory: false,
+      errorInfo: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.sysAdminGetRepoHistorySetting(this.props.repoID).then(res => {
+      this.setState({
+        keepDays: res.data.keep_days,
+        allHistory: res.data.keep_days < 0 ? true : false,
+        noHistory: res.data.keep_days === 0 ? true : false,
+        autoHistory: res.data.keep_days > 0 ? true : false,
+        disabled: res.data.keep_days > 0 ? false : true,
+        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30, 
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  submit = () => {
+    let days = this.state.keepDays;
+    if (this.state.autoHistory) {
+      days = this.state.expireDays;
+    }
+    let repoID = this.props.repoID;
+    let reg = /^-?\d+$/;
+    let flag = reg.test(days);
+    if (flag) {  
+      let message = gettext('Successfully set library history.');
+      seafileAPI.sysAdminUpdateRepoHistorySetting(repoID, days).then(res => {
+        toaster.success(message);
+        this.setState({keepDays: res.data.keep_days});
+        this.props.toggleDialog();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    } else {
+      this.setState({
+        errorInfo: gettext('Please enter a non-negative integer'),
+      });
+    }
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.submit();
+      e.preventDefault();
+    }
+  }
+
+  onChange = (e) => {
+    let num = e.target.value;
+    this.setState({
+      keepDays: num,
+      expireDays: num,
+    });
+  }
+
+  setLimitDays = (type) => {
+    if (type === 'allHistory') {
+      this.setState({
+        keepDays: -1,
+      });
+    } else if (type === 'noHistory') {
+      this.setState({
+        keepDays: 0,
+      });
+    } else {
+      this.setState({
+        disabled: false 
+      });
+    }
+
+    this.setState({
+      allHistory: type === 'allHistory' ? true : false,
+      noHistory: type === 'noHistory' ? true : false,
+      autoHistory: type === 'autoHistory' ? true : false,
+    });
+  }
+
+  render() {
+    const itemName = this.props.itemName;
+    return (
+      <Modal isOpen={true}>
+        <ModalHeader toggle={this.props.toggleDialog}>
+          <span className="op-target" title={itemName}>{itemName}</span>{' '}
+          {gettext('History Setting')}
+        </ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup check>
+              <Input type="radio" name="radio1" checked={this.state.allHistory} onChange={() => {this.setLimitDays('allHistory');}}/>{' '}
+              <Label>{gettext('Keep full history')}</Label>
+            </FormGroup>
+            <FormGroup check>
+              <Input type="radio" name="radio1" checked={this.state.noHistory} onChange={() =>{this.setLimitDays('noHistory');}}/>{' '}
+              <Label>{gettext('Don\'t keep history')}</Label>
+            </FormGroup>
+            <FormGroup check>
+              <Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
+              <Label>{gettext('Only keep a period of history:')}</Label>
+              <Input 
+                type="text" 
+                className="expire-input" 
+                value={this.state.expireDays}
+                onChange={this.onChange} 
+                disabled={this.state.disabled}
+                onKeyDown={this.handleKeyPress}
+              />{' '}
+              <Label><span>{gettext('days')}</span></Label>
+            </FormGroup>
+            {this.state.errorInfo && <Alert color="danger">{this.state.errorInfo}</Alert>}
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SysAdminLibHistorySettingDialog.propTypes = propTypes;
+
+export default SysAdminLibHistorySettingDialog;

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js

@@ -0,0 +1,96 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
+import { gettext } from '../../../utils/constants';
+import SysAdminShareToUser from './sysadmin-share-to-user';
+import SysAdminShareToGroup from './sysadmin-share-to-group';
+import '../../../css/share-link-dialog.css';
+
+const propTypes = {
+  itemName: PropTypes.string.isRequired,
+  itemPath: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  repoEncrypted: PropTypes.bool,
+  userPerm: PropTypes.string,
+  enableDirPrivateShare: PropTypes.bool
+};
+
+class SysAdminShareDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: this.getInitialActiveTab(),
+      isRepoOwner: false
+    };
+  }
+
+  getInitialActiveTab = () => {
+    return 'shareToUser';
+  }
+
+  toggle = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({activeTab: tab});
+    }
+  }
+
+  renderDirContent = () => {
+    let activeTab = this.state.activeTab;
+    const { enableDirPrivateShare, isGroupOwnedRepo } = this.props;
+    return (
+      <Fragment>
+        <div className="share-dialog-side">
+          <Nav pills vertical>
+            {enableDirPrivateShare &&
+              <Fragment>
+                <NavItem>
+                  <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')}>
+                    {gettext('Share to user')}
+                  </NavLink>
+                </NavItem>
+                <NavItem>
+                  <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')}>
+                    {gettext('Share to group')}
+                  </NavLink>
+                </NavItem>
+              </Fragment>
+            }
+          </Nav>
+        </div>
+        <div className="share-dialog-main">
+          <TabContent activeTab={this.state.activeTab}>
+            {enableDirPrivateShare &&
+              <Fragment>
+                <TabPane tabId="shareToUser">
+                  <SysAdminShareToUser itemType={'library'} isGroupOwnedRepo={isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/>
+                </TabPane>
+                <TabPane tabId="shareToGroup">
+                  <SysAdminShareToGroup itemType={'library'} isGroupOwnedRepo={isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/>
+                </TabPane>
+              </Fragment>
+            }
+          </TabContent>
+        </div>
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></ModalHeader>
+          <ModalBody className="share-dialog-content">
+            {this.renderDirContent()}
+          </ModalBody>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+SysAdminShareDialog.propTypes = propTypes;
+
+export default SysAdminShareDialog;

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

@@ -0,0 +1,302 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import Select from 'react-select';
+import makeAnimated from 'react-select/lib/animated';
+import { isPro, gettext } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api.js';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
+import SharePermissionEditor from '../../select-editor/share-permission-editor';
+
+class GroupItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.group_id);
+  }
+
+  onChangeUserPermission = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeUserPermission(item, permission);
+  }
+
+  render() {
+    let item = this.props.item;
+    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className='name'>{item.group_name}</td>
+        <td>
+          <SharePermissionEditor 
+            isTextMode={true}
+            isEditIconShow={this.state.isOperationShow}
+            currentPermission={currentPermission}
+            permissions={this.props.permissions}
+            onPermissionChanged={this.onChangeUserPermission}
+          />
+        </td>
+        <td>
+          <span
+            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class GroupList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <GroupItem 
+              key={index} 
+              item={item} 
+              permissions={this.props.permissions}
+              deleteShareItem={this.props.deleteShareItem}
+              onChangeUserPermission={this.props.onChangeUserPermission}
+            />
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
+const propTypes = {
+  isGroupOwnedRepo: PropTypes.bool,
+  itemPath: PropTypes.string.isRequired,
+  itemType: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+};
+
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+  );
+};
+
+class SysAdminShareToGroup extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errorMsg: [],
+      permission: 'rw',
+      sharedItems: []
+    };
+    this.options = [];
+    this.permissions = ['rw', 'r'];
+    if (isPro) {
+      this.permissions.push('admin', 'cloud-edit', 'preview');
+    }
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+  }
+
+  componentDidMount() {
+    this.loadOptions();
+    this.listSharedGroups();
+  }
+
+  loadOptions = () => {
+    seafileAPI.shareableGroups().then((res) => {
+      this.options = [];
+      for (let i = 0 ; i < res.data.length; i++) {
+        let obj = {};
+        obj.value = res.data[i].name;
+        obj.id = res.data[i].id;
+        obj.label = res.data[i].name;
+        this.options.push(obj);
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  listSharedGroups = () => {
+    let repoID = this.props.repoID; 
+    seafileAPI.sysAdminListRepoSharedItems(repoID, 'group').then((res) => {
+      if(res.data.length !== 0) {
+        this.setState({
+          sharedItems: res.data
+        });
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  setPermission = (permission) => {
+    this.setState({permission: permission});
+  }
+
+  shareToGroup = () => {
+    let groups = [];
+    let repoID = this.props.repoID; 
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
+      for (let i = 0; i < this.state.selectedOption.length; i ++) {
+        groups[i] = this.state.selectedOption[i].id;
+      }
+    }
+    seafileAPI.sysAdminAddRepoSharedItem(repoID, 'group', groups, this.state.permission).then(res => {
+      let errorMsg = [];
+      if (res.data.failed.length > 0) {
+        for (let i = 0 ; i < res.data.failed.length ; i++) {
+          errorMsg[i] = res.data.failed[i];
+        }
+      }
+      let items = res.data.success;
+      this.setState({
+        errorMsg: errorMsg,
+        sharedItems: this.state.sharedItems.concat(items),
+        selectedOption: null,
+        permission: 'rw',
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteShareItem = (groupID) => {
+    let repoID = this.props.repoID; 
+    seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'group', groupID).then(() => {
+      this.setState({
+        sharedItems: this.state.sharedItems.filter(item => { return item.group_id !== groupID; }) 
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onChangeUserPermission = (item, permission) => {
+    let repoID = this.props.repoID;
+    let groupID = item.group_id;
+    seafileAPI.sysAdminUpdateRepoSharedItemPermission(repoID, 'group', groupID, permission).then(() => {
+      this.updateSharedItems(item, permission);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+  
+  updateSharedItems = (item, permission) => {
+    let groupID = item.group_id;
+    let sharedItems = this.state.sharedItems.map(sharedItem => {
+      let sharedItemGroupID = sharedItem.group_id;
+      if (groupID === sharedItemGroupID) {
+        sharedItem.permission = permission;
+        sharedItem.is_admin = permission === 'admin' ? true : false;
+      }
+      return sharedItem;
+    });
+    this.setState({sharedItems: sharedItems});
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="50%">{gettext('Group')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <Select
+                  isMulti
+                  onChange={this.handleSelectChange}
+                  options={this.options}
+                  placeholder={gettext('Select groups...')}
+                  components={makeAnimated()}
+                  maxMenuHeight={200}
+                  inputId={'react-select-2-input'}
+                  value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
+                />
+              </td>
+              <td>
+                <SharePermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChanged={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&                  
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = item.group_name + ': ' + item.error_msg;
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })                                                
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="50%">{gettext('Group')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
+              </tr>
+            </thead>
+            <GroupList 
+              items={this.state.sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SysAdminShareToGroup.propTypes = propTypes;
+
+export default SysAdminShareToGroup;

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

@@ -0,0 +1,282 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { isPro, gettext, siteRoot } from '../../../utils/constants';
+import { Button } from 'reactstrap';
+import { seafileAPI } from '../../../utils/seafile-api.js';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
+import UserSelect from '../../user-select';
+import SharePermissionEditor from '../../select-editor/share-permission-editor';
+
+class UserItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteShareItem = () => {
+    let item = this.props.item;
+    this.props.deleteShareItem(item.user_email);
+  }
+  
+  onChangeUserPermission = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeUserPermission(item, permission);
+  }
+
+  render() {
+    let item = this.props.item;
+    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="name">{item.user_name}</td>
+        <td>
+          <SharePermissionEditor 
+            isTextMode={true}
+            isEditIconShow={this.state.isOperationShow}
+            currentPermission={currentPermission}
+            permissions={this.props.permissions}
+            onPermissionChanged={this.onChangeUserPermission}
+          />
+        </td>
+        <td>
+          <span
+            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteShareItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+class UserList extends React.Component {
+
+  render() {
+    let items = this.props.items;
+    return (
+      <tbody>
+        {items.map((item, index) => {
+          return (
+            <UserItem 
+              key={index} 
+              item={item} 
+              permissions={this.props.permissions}
+              deleteShareItem={this.props.deleteShareItem}
+              onChangeUserPermission={this.props.onChangeUserPermission}
+            />
+          );
+        })}
+      </tbody>
+    );
+  }
+}
+
+const propTypes = {
+  isGroupOwnedRepo: PropTypes.bool,
+  itemPath: PropTypes.string.isRequired,
+  itemType: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired
+};
+
+class SysAdminShareToUser extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errorMsg: [],
+      permission: 'rw',
+      sharedItems: []
+    };
+    this.options = [];
+    this.permissions = ['rw', 'r'];
+    if (isPro) {
+      this.permissions.push('admin', 'cloud-edit', 'preview');
+    }
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+    this.options = [];
+  }
+
+  componentDidMount() {
+    let repoID = this.props.repoID;
+    seafileAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => {
+      if(res.data.length !== 0) {
+        this.setState({sharedItems: res.data});
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  setPermission = (permission) => {
+    this.setState({permission: permission});
+  }
+
+  shareToUser = () => {
+    let users = [];
+    let repoID = this.props.repoID;
+    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
+      for (let i = 0; i < this.state.selectedOption.length; i ++) {
+        users[i] = this.state.selectedOption[i].email;
+      }
+    }
+    seafileAPI.sysAdminAddRepoSharedItem(repoID, 'user' , users, this.state.permission).then(res => {
+      let errorMsg = [];
+      if (res.data.failed.length > 0) {
+        for (let i = 0 ; i < res.data.failed.length ; i++) {
+          errorMsg[i] = res.data.failed[i];
+        }
+      }
+      let newItems = res.data.success;
+      this.setState({
+        errorMsg: errorMsg,
+        sharedItems: this.state.sharedItems.concat(newItems),
+        selectedOption: null,
+        permission: 'rw',
+      });
+      this.refs.userSelect.clearSelect();
+    }).catch(error => {
+      if (error.response) {
+        let message = gettext('Library can not be shared to owner.');
+        let errMessage = [];
+        errMessage.push(message);
+        this.setState({
+          errorMsg: errMessage,
+          selectedOption: null,
+        });
+      }
+    });
+  } 
+
+  deleteShareItem = (useremail) => {
+    let repoID = this.props.repoID;
+    seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'user', useremail).then(res => {
+      this.setState({
+        sharedItems: this.state.sharedItems.filter( item => { return item.user_email !== useremail; }) 
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onChangeUserPermission = (item, permission) => {
+    let repoID = this.props.repoID;
+    let userEmail = item.user_email;
+    seafileAPI.sysAdminUpdateRepoSharedItemPermission(repoID, 'user', userEmail, permission).then(() => {
+      this.updateSharedItems(item, permission);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+  
+  updateSharedItems = (item, permission) => {
+    let username = item.user_name;
+    let sharedItems = this.state.sharedItems.map(sharedItem => {
+      let sharedItemUsername = sharedItem.user_name;
+      if (username === sharedItemUsername) {
+        sharedItem.permission = permission;
+        sharedItem.is_admin = permission === 'admin' ? true : false;
+      }
+      return sharedItem;
+    });
+    this.setState({sharedItems: sharedItems});
+  }
+
+  render() {
+    let { sharedItems } = this.state;
+    return (
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="50%">{gettext('User')}</th>
+              <th width="35%">{gettext('Permission')}</th>
+              <th width="15%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <UserSelect
+                  ref="userSelect"
+                  isMulti={true}
+                  className="reviewer-select"
+                  placeholder={gettext('Select users...')}
+                  onSelectChange={this.handleSelectChange}
+                />
+              </td>
+              <td>
+                <SharePermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChanged={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = '';
+                if (item.email) {
+                  errMessage = item.email + ': ' + item.error_msg;
+                } else {
+                  errMessage = item;
+                }
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="50%">{gettext('User')}</th>
+                <th width="35%">{gettext('Permission')}</th>
+                <th width="15%"></th>
+              </tr>
+            </thead>
+            <UserList 
+              items={sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SysAdminShareToUser.propTypes = propTypes;
+
+export default SysAdminShareToUser;

frontend/src/components/dialog/transfer-dialog.js

@@ -13,6 +13,7 @@ const propTypes = {
   itemName: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
+  canTransferToDept: PropTypes.bool
 };
 
 class TransferDialog extends React.Component {
@@ -61,6 +62,11 @@ class TransferDialog extends React.Component {
     const innerSpan = '<span class="op-target" title=' + itemName + '>' + itemName +'</span>';
     let msg = gettext('Transfer Library {library_name}');
     let message = msg.replace('{library_name}', innerSpan);
+
+    let canTransferToDept = true;
+    if (this.props.canTransferToDept != undefined) {
+      canTransferToDept = this.props.canTransferToDept;
+    }
     return (
       <Modal isOpen={true}>
         <ModalHeader toggle={this.props.toggleDialog}>
@@ -72,7 +78,7 @@ class TransferDialog extends React.Component {
               ref="userSelect"
               isMulti={false}
               className="reviewer-select"
-              placeholder={gettext('Search users')}
+              placeholder={gettext('Select a user')}
               onSelectChange={this.handleSelectChange}
             /> :
             <Select
@@ -86,7 +92,7 @@ class TransferDialog extends React.Component {
               onChange={this.handleSelectChange}
             />
           }
-          {isPro &&
+          {isPro && canTransferToDept &&
             <span className="action-link" onClick={this.onClick}>{this.state.transferToUser ?
               gettext('Transfer to department'): gettext('Transfer to user')}
             </span>

frontend/src/models/system-admin/dirent.js

@@ -0,0 +1,14 @@
+class Dirent {
+  constructor(obj) {
+    this.name = obj.obj_name;
+    this.mtime = obj.last_update;
+    this.size = obj.file_size;
+    this.is_file = obj.is_file;
+  }
+
+  isDir() {
+    return !this.is_file;
+  }
+}
+
+export default Dirent;

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

@@ -7,10 +7,16 @@ import MainPanel from './main-panel';
 import FileScanRecords from './file-scan-records';
 import WorkWeixinDepartments from './work-weixin-departments';
 import Info from './info';
+
 import DesktopDevices from './devices/desktop-devices';
 import MobileDevices from './devices/mobile-devices';
 import DeviceErrors from './devices/devices-errors';
 
+import AllRepos from './repos/all-repos';
+import SystemRepo from './repos/system-repo';
+import TrashRepos from './repos/trash-repos';
+import DirView from './repos/dir-view';
+
 import '../../assets/css/fa-solid.css';
 import '../../assets/css/fa-regular.css';
 import '../../assets/css/fontawesome.css';
@@ -29,21 +35,33 @@ class SysAdmin extends React.Component {
   componentDidMount() {
     let href = window.location.href.split('/');
     let currentTab = href[href.length - 2];
-    let tmpTab;
 
-    const devicesUrlParts = ['desktop-devices', 'mobile-devices', 'device-errors'];
-    const devicesTab = 'devices';
-    tmpTab = this.getCurrentTabForPageList(devicesUrlParts, devicesTab);
+    const pageList = [
+      {
+        tab: 'devices',
+        urlPartList: ['desktop-devices', 'mobile-devices', 'device-errors']
+      },
+      {
+        tab: 'libraries',
+        urlPartList: ['all-libraries', 'system-library', 'trash-libraries', 'libraries/']
+      },
+    ];
+    const tmpTab = this.getCurrentTabForPageList(pageList);
     currentTab = tmpTab ? tmpTab : currentTab;
 
     this.setState({currentTab: currentTab});
   }
 
-  getCurrentTabForPageList = (pageUrlPartList, curTab) => {
+  getCurrentTabForPageList = (pageList) => {
+    let urlPartList, tab;
     const urlBase = `${siteRoot}sys/`;
-    for (let i = 0, len = pageUrlPartList.length; i < len; i++) {
-      if (location.href.indexOf(`${urlBase}${pageUrlPartList[i]}`) != -1) {
-        return curTab;
+    for (let i = 0, len = pageList.length; i < len; i++) {
+      urlPartList = pageList[i].urlPartList;
+      tab = pageList[i].tab;
+      for (let j = 0, jlen = urlPartList.length; j < jlen; j++) {
+        if (location.href.indexOf(`${urlBase}${urlPartList[j]}`) != -1) {
+          return tab;
+        }
       }
     }
   }
@@ -73,6 +91,10 @@ class SysAdmin extends React.Component {
             <DesktopDevices path={siteRoot + 'sys/desktop-devices'} />
             <MobileDevices path={siteRoot + 'sys/mobile-devices'} />
             <DeviceErrors path={siteRoot + 'sys/device-errors'} />
+            <AllRepos path={siteRoot + 'sys/all-libraries'} />
+            <SystemRepo path={siteRoot + 'sys/system-library'} />
+            <TrashRepos path={siteRoot + 'sys/trash-libraries'} />
+            <DirView path={siteRoot + 'sys/libraries/:repoID/*'} />
             <FileScanRecords
               path={siteRoot + 'sys/file-scan-records'}
               currentTab={currentTab} 

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

@@ -0,0 +1,412 @@
+import React, { Component, Fragment } from 'react';
+import { Button } from 'reactstrap';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext, siteRoot, isPro } 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 ModalPortal from '../../../components/modal-portal';
+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 SysAdminCreateRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog';
+import MainPanelTopbar from '../main-panel-topbar';
+import ReposNav from './repos-nav';
+import RepoOpMenu from './repo-op-menu';
+
+const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  getPreviousPageList = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page - 1);
+  }
+
+  getNextPageList = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, pageInfo } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No libraries')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table>
+            <thead>
+              <tr>
+                <th width="5%">{/*icon*/}</th>
+                <th width="25%">{gettext('Name')}</th>
+                <th width="15%">{gettext('Files')}{' / '}{gettext('Size')}</th>
+                <th width="32%">ID</th>
+                <th width="18%">{gettext('Owner')}</th>
+                <th width="5%">{/*Operations*/}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  repo={item}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  onDeleteRepo={this.props.onDeleteRepo}
+                  onTransferRepo={this.props.onTransferRepo}
+                />);
+              })}
+            </tbody>
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPageList}
+            gotoNextPage={this.getNextPageList}
+            currentPage={pageInfo.current_page}
+            hasNextPage={pageInfo.has_next_page}
+            canResetPerPage={false}
+          />
+        </Fragment>
+      );
+
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      highlight: false,
+      isShareDialogOpen: false,
+      isDeleteDialogOpen: false,
+      isTransferDialogOpen: false,
+      isHistorySettingDialogOpen: false
+    };
+  }
+
+  onDeleteRepo = (repo) => {
+    seafileAPI.sysAdminDeleteRepo(repo.id).then((res) => {
+      this.props.onDeleteRepo(repo);
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.name);
+      toaster.success(msg);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+    this.toggleDeleteDialog();
+  }
+
+  onTransferRepo = (owner) => {
+    seafileAPI.sysAdminTransferRepo(this.props.repo.id, owner.email).then((res) => {
+      this.props.onTransferRepo(res.data);
+      let message = gettext('Successfully transferred the library.');
+      toaster.success(message);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+    this.toggleTransferDialog();
+  }
+
+  handleMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      });
+    }
+  }
+
+  handleMouseOut = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      });
+    }
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  onMenuItemClick = (operation) => {
+    switch(operation) {
+      case 'Share':
+        this.toggleShareDialog();
+        break;
+      case 'Delete':
+        this.toggleDeleteDialog();
+        break;
+      case 'Transfer':
+        this.toggleTransferDialog();
+        break;
+      case 'History Setting':
+        this.toggleHistorySettingDialog();
+        break;
+      default:
+        break;
+    }
+  }
+
+  toggleShareDialog = () => {
+    this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
+  }
+
+  toggleDeleteDialog = () => {
+    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+  }
+
+  toggleTransferDialog = () => {
+    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
+  }
+
+  toggleHistorySettingDialog = () => {
+    this.setState({isHistorySettingDialogOpen: !this.state.isHistorySettingDialogOpen});
+  }
+
+  renderRepoName = () => {
+    const { repo } = this.props;
+    if (repo.name) {
+      if (isPro && enableSysAdminViewRepo && !repo.encrypted) {
+        return <a href={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</a>;
+      } else {
+        return repo.name;
+      }
+    } else {
+      return '--';
+    }
+  }
+
+  render () {
+    let { repo } = this.props;
+    let { isOpIconShown,
+      isShareDialogOpen, isDeleteDialogOpen, 
+      isTransferDialogOpen, isHistorySettingDialogOpen
+    } = this.state;
+    let iconUrl = Utils.getLibIconUrl(repo);
+    let iconTitle = Utils.getLibIconTitle(repo);
+    let isGroupOwnedRepo = repo.owner.indexOf('@seafile_group') != -1;
+
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+          <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+          <td>{this.renderRepoName()}</td>
+          <td>{`${repo.file_count} / ${Utils.bytesToSize(repo.size)}`}</td>
+          <td>{repo.id}</td>
+          <td>
+            {isGroupOwnedRepo ?
+              <a href={`${siteRoot}sysadmin/#address-book/groups/${repo.owner_name}/`}>{repo.group_name}</a> :
+              <a href={`${siteRoot}useradmin/info/${encodeURIComponent(repo.owner_email)}/`}>{repo.owner_name}</a>
+            }
+          </td>
+          <td>
+            {(!isGroupOwnedRepo && isOpIconShown) &&
+            <RepoOpMenu
+              repo={repo}
+              onMenuItemClick={this.onMenuItemClick}
+              onFreezedItem={this.props.onFreezedItem}
+              onUnfreezedItem={this.onUnfreezedItem}
+            />
+            }
+          </td>
+        </tr>
+        {isShareDialogOpen &&
+          <ModalPortal>
+            <SysAdminShareDialog
+              itemName={repo.name}
+              itemPath={'/'}
+              repoID={repo.id}
+              isGroupOwnedRepo={isGroupOwnedRepo}
+              repoEncrypted={repo.encrypted}
+              enableDirPrivateShare={true}
+              userPerm={repo.permission}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPortal>
+        }
+        {isDeleteDialogOpen &&
+          <ModalPortal>
+            <DeleteRepoDialog
+              repo={repo}
+              onDeleteRepo={this.onDeleteRepo}
+              toggle={this.toggleDeleteDialog}
+            />
+          </ModalPortal>
+        }
+        {isTransferDialogOpen &&
+          <ModalPortal>
+            <TransferDialog
+              itemName={repo.name}
+              submit={this.onTransferRepo}
+              canTransferToDept={false}
+              toggleDialog={this.toggleTransferDialog}
+            />
+          </ModalPortal>
+        }
+        {isHistorySettingDialogOpen &&
+          <ModalPortal>
+            <SysAdminLibHistorySettingDialog
+              repoID={repo.id}
+              itemName={repo.name}
+              toggleDialog={this.toggleHistorySettingDialog}
+            />
+          </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+class AllRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      repos: [],
+      pageInfo: {},
+      perPage: 100,
+      isCreateRepoDialogOpen: false
+    };
+  }
+
+  componentDidMount () {
+    this.getReposByPage(1);
+  }
+
+  toggleCreateRepoDialog = () => {
+    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+  }
+
+  getReposByPage = (page) => {
+    seafileAPI.sysAdminListAllRepos(page, this.state.perPage).then((res) => {
+      this.setState({
+        loading: false,
+        repos: res.data.repos,
+        pageInfo: res.data.page_info
+      });
+    }).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.')
+        }); 
+      }   
+    });
+  }
+
+  createRepo = (repoName, Owner) => {
+    seafileAPI.sysAdminCreateRepo(repoName, Owner).then(res => {
+      this.state.repos.unshift(res.data);
+      this.setState({
+        repos: this.state.repos
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onDeleteRepo = (targetRepo) => {
+    let repos = this.state.repos.filter(repo => {
+      return repo.id != targetRepo.id;
+    });
+    this.setState({
+      repos: repos
+    });
+  }
+
+  onTransferRepo = (targetRepo) => {
+    let repos = this.state.repos.map((item) => {
+      return item.id == targetRepo.id ? targetRepo : item;
+    });
+    this.setState({
+      repos: repos
+    });
+  }
+
+  render() {
+    let { isCreateRepoDialogOpen } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleCreateRepoDialog}>
+            <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+          </Button>          
+        </MainPanelTopbar>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <ReposNav currentItem="all" />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.repos}
+                pageInfo={this.state.pageInfo}
+                getListByPage={this.getReposByPage}
+                onDeleteRepo={this.onDeleteRepo}
+                onTransferRepo={this.onTransferRepo}
+              />
+            </div>
+          </div>
+        </div>
+        {isCreateRepoDialogOpen &&
+        <SysAdminCreateRepoDialog
+          createRepo={this.createRepo}
+          toggleDialog={this.toggleCreateRepoDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default AllRepos;

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

@@ -0,0 +1,129 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import moment from 'moment';
+import { gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import Loading from '../../../components/loading';
+
+class DirentItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  openFolder = () => {
+    this.props.openFolder(this.props.dirent);
+  }
+
+  deleteDirent = (e) => {
+    e.preventDefault();
+    this.props.deleteDirent(this.props.dirent);
+  }
+
+  downloadDirent = (e) => {
+    e.preventDefault();
+    this.props.downloadDirent(this.props.dirent);
+  }
+
+  render () {
+    let { isOpIconShown, isDeleteDialogOpen } = this.state;
+    let { dirent, fromSystemRepo } = this.props;
+    let iconUrl = Utils.getDirentIcon(dirent);
+
+    return (
+      <Fragment>
+        <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+          <td className="text-center"><img src={iconUrl} width="24" alt='' /></td>
+          <td>
+            {dirent.is_file ?
+              dirent.name :
+              <Link to="#" onClick={this.openFolder}>{dirent.name}</Link>
+            }
+          </td>
+          <td>
+            {isOpIconShown && fromSystemRepo &&
+              <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.deleteDirent}></a>
+            }
+            {isOpIconShown && dirent.is_file && 
+            <a href="#" className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.downloadDirent}></a>
+            }
+          </td>
+          <td>{dirent.size}</td>
+          <td>{moment(dirent.mtime).fromNow()}</td>
+        </tr>
+      </Fragment>
+    );
+  }
+}
+
+
+const propTypes = {
+  direntList: PropTypes.array.isRequired
+};
+
+class DirContent extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { loading, errorMsg, direntList } = this.props;
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="5%">{/*icon*/}</th>
+              <th width="55%">{gettext('Name')}</th>
+              <th width="10%">{/*operation*/}</th>
+              <th width="15%">{gettext('Size')}</th>
+              <th width="15%">{gettext('Last Update')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {direntList.map((dirent, index) => {
+              return <DirentItem
+                key={index}
+                dirent={dirent}
+                openFolder={this.props.openFolder}
+                deleteDirent={this.props.deleteDirent}
+                downloadDirent={this.props.downloadDirent}
+                fromSystemRepo={this.props.fromSystemRepo}
+              />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    );
+  }
+}
+
+DirContent.propTypes = propTypes;
+
+export default DirContent;

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

@@ -0,0 +1,71 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { siteRoot, gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+
+const propTypes = {
+  repoName: PropTypes.string.isRequired,
+  currentPath: PropTypes.string.isRequired,
+  onPathClick: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+};
+
+class DirPath extends React.Component {
+
+  onPathClick = (e) => {
+    let path = Utils.getEventData(e, 'path');
+    this.props.onPathClick(path);
+  }
+
+  turnPathToLink = (path) => {
+    path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
+    let pathList = path.split('/');
+    let nodePath = '';
+    let pathElem = pathList.map((item, index) => {
+      if (item === '') {
+        return;
+      }
+      if (index === (pathList.length - 1)) {
+        return (
+          <Fragment key={index}>
+            <span className="path-split">/</span>
+            <span className="path-file-name">{item}</span>
+          </Fragment>
+        );
+      } else {
+        nodePath += '/' + item;
+        return (
+          <Fragment key={index} >
+            <span className="path-split">/</span>
+            <a className="path-link" data-path={nodePath} onClick={this.onPathClick}>{item}</a>
+          </Fragment>
+        );
+      }
+    });
+    return pathElem;
+  }
+
+  render() {
+    let { isSystemRepo, currentPath, repoName } = this.props;
+    let pathElem = this.turnPathToLink(currentPath);
+
+    return (
+      <div className="path-container">
+        {isSystemRepo ?
+        <a href={`${siteRoot}sys/system-library/`}>{gettext('System')}</a> :
+        <a href={`${siteRoot}sys/all-libraries/`}>{gettext('All')}</a>
+        }
+        <span className="path-split">/</span>
+        {(currentPath === '/' || currentPath === '') ?
+          <span className="path-repo-name">{repoName}</span>:
+          <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
+        }
+        {pathElem}
+      </div>
+    );
+  }
+}
+
+DirPath.propTypes = propTypes;
+
+export default DirPath;

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

@@ -0,0 +1,231 @@
+import React, { Component, Fragment } from 'react';
+import { Button } from 'reactstrap';
+import { post } from 'axios';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, siteRoot, gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import CreateFolderDialog from '../../../components/dialog/create-folder-dialog';
+import Dirent from '../../../models/system-admin/dirent';
+import MainPanelTopbar from '../main-panel-topbar';
+import DirPathBar from './dir-path-bar';
+import DirContent from './dir-content';
+
+class DirView extends Component {
+
+  constructor(props) {
+    super(props);
+    this.fileInput = React.createRef();
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      isSystemRepo: false,
+      repoName: '',
+      path: '',
+      direntList: [],
+      isNewFolderDialogOpen: false
+    };
+  }
+
+  componentDidMount () {
+    this.loadDirentList('/');
+  }
+
+  onPathClick = (path) => {
+    this.loadDirentList(path);
+  }
+
+  toggleNewFolderDialog = () => {
+    this.setState({isNewFolderDialogOpen: !this.state.isNewFolderDialogOpen});
+  }
+
+  createNewFolder = (path) => {
+    let folderName = Utils.getFileName(path);
+    seafileAPI.sysAdminCreateSysRepoFolder(this.props.repoID, this.state.path, folderName).then(res => {
+      let new_dirent = new Dirent(res.data);
+      let direntList = this.state.direntList;
+      direntList.unshift(new_dirent);
+      this.setState({
+        direntList: direntList
+      });
+      this.toggleNewFolderDialog();
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
+  openFolder = (dirent) => {
+    let direntPath = Utils.joinPath(this.state.path, dirent.name);
+    if (!dirent.is_file) {
+      this.loadDirentList(direntPath);
+    }
+  }
+
+  loadDirentList = (path) => {
+    const repoID = this.props.repoID;
+    seafileAPI.sysAdminListRepoDirents(repoID, path).then(res => {
+      const { is_system_library: isSystemRepo, repo_name: repoName, dirent_list } = res.data;
+      let direntList = [];
+      dirent_list.forEach(item => {
+        let dirent = new Dirent(item);
+        direntList.push(dirent);
+      });
+      this.setState({
+        loading: false,
+        repoName: repoName,
+        isSystemRepo: isSystemRepo, 
+        direntList: direntList, 
+        path: path,
+      }, () => {
+        let url = siteRoot + 'sys/libraries/' + repoID + '/' + encodeURIComponent(this.state.repoName) + Utils.encodePath(path);
+        window.history.replaceState({url: url, path: path}, path, url);
+      });
+    }).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.')
+        });
+      }
+    });
+  }
+
+  deleteDirent = (dirent) => {
+    let path = Utils.joinPath(this.state.path, dirent.name);
+    seafileAPI.sysAdminDeleteRepoDirent(this.props.repoID, path).then(res => {
+      toaster.success(gettext('Successfully deleted 1 item.'));
+      let direntList = this.state.direntList.filter(item => {
+        return item.name != dirent.name;
+      });
+      this.setState({
+        direntList: direntList
+      });
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
+  downloadDirent = (dirent) => {
+    let path = Utils.joinPath(this.state.path, dirent.name);
+    seafileAPI.sysAdminGetRepoFileDownloadURL(this.props.repoID, path).then(res => {
+      location.href = res.data.download_url;
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
+  openFileInput = () => {
+    this.fileInput.current.click();
+  }
+
+  onFileInputChange = () => {
+    if (!this.fileInput.current.files.length) {
+      return;
+    }
+    const file = this.fileInput.current.files[0];
+
+    let { path } = this.state;
+    seafileAPI.sydAdminGetSysRepoItemUploadURL(path).then(res => {
+      let formData = new FormData();
+      formData.append('parent_dir', path);
+      formData.append('file', file);
+      post(res.data.upload_link, formData).then(res => {
+        const fileObj = res.data[0];
+        let newDirent = new Dirent({
+          'is_file': true,
+          'obj_name': fileObj.name,
+          'file_size': Utils.bytesToSize(fileObj.size),
+          'last_update': (new Date()).getTime()
+        });
+        let direntList = this.state.direntList;
+        const dirs = direntList.filter(item => { return !item.is_file; });
+        direntList.splice(dirs.length, 0, newDirent);
+        this.setState({
+          direntList: direntList
+        });
+      });
+    }).catch((err) => {
+      let errMessage = Utils.getErrorMsg(err);
+      toaster.danger(errMessage);
+    });
+  }
+
+  checkDuplicatedName = (newName) => {
+    let direntList = this.state.direntList;
+    let isDuplicated = direntList.some(object => {
+      return object.name === newName;
+    });
+    return isDuplicated;
+  }
+
+  render() {
+    const { loading, errorMsg, 
+      repoName, direntList, isSystemRepo, path, 
+      isNewFolderDialogOpen } = this.state;
+    const { repoID } = this.props;
+
+    return (
+      <Fragment>
+        {isSystemRepo ?
+          <MainPanelTopbar>
+            <Fragment>
+              <input className="d-none" type="file" onChange={this.onFileInputChange} ref={this.fileInput} />
+              <Button className="operation-item" onClick={this.openFileInput}>{gettext('Upload')}</Button>
+              <Button className="operation-item" onClick={this.toggleNewFolderDialog}>{gettext('New Folder')}</Button>
+            </Fragment>
+          </MainPanelTopbar> : <MainPanelTopbar /> 
+        }
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path align-items-center">
+              <DirPathBar 
+                isSystemRepo={isSystemRepo}
+                repoID={repoID}
+                repoName={repoName}
+                currentPath={path}
+                onPathClick={this.onPathClick}
+              />
+            </div>
+            <div className="cur-view-content">
+              <DirContent
+                loading={loading}
+                errorMsg={errorMsg}
+                fromSystemRepo={isSystemRepo}
+                direntList={direntList}
+                openFolder={this.openFolder}
+                deleteDirent={this.deleteDirent}
+                downloadDirent={this.downloadDirent}
+              />
+            </div>
+          </div>
+        </div>
+        {isNewFolderDialogOpen &&
+          <CreateFolderDialog
+            parentPath={path}
+            checkDuplicatedName={this.checkDuplicatedName}
+            onAddFolder={this.createNewFolder}
+            addFolderCancel={this.toggleNewFolderDialog} 
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default DirView;

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

@@ -0,0 +1,96 @@
+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-nav.js

@@ -0,0 +1,41 @@
+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: 'all', urlPart: 'all-libraries', text: gettext('All')}, 
+      {name: 'system', urlPart: 'system-library', text: gettext('System')}, 
+      {name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash')} 
+    ];
+  }
+
+  render() {
+    const { currentItem } = this.props;
+    return (
+      <div className="cur-view-path tab-nav-container">
+        <ul className="nav">
+          {this.navItems.map((item, index) => {
+            return (
+              <li className="nav-item" key={index}>
+                <Link to={`${siteRoot}sys/${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/repos/system-repo.js

@@ -0,0 +1,134 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext, siteRoot } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import Loading from '../../../components/loading';
+import EmptyTip from '../../../components/empty-tip';
+import MainPanelTopbar from '../main-panel-topbar';
+import ReposNav from './repos-nav';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { loading, errorMsg, items } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No System Library.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="33%">{gettext('Name')}</th>
+                <th width="34%">{gettext('ID')}</th>
+                <th width="33%">{gettext('Description')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item key={index} item={item}/>);
+              })}
+            </tbody>
+          </table>
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const item = this.props.item;
+    return (
+      <tr>
+        <td><Link to={`${siteRoot}sys/libraries/${item.id}/`}>{item.name}</Link></td>
+        <td>{item.id}</td>
+        <td>{item.description}</td>
+      </tr>
+    );
+  }
+}
+
+class SystemRepo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount () {
+    seafileAPI.sysAdminGetSystemRepoInfo().then((res) => {
+      let items = [];
+      items.push(res.data);
+      this.setState({
+        items: items,
+        loading: false
+      });
+    }).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.')
+        }); 
+      }   
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <ReposNav currentItem="system" />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.items}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default SystemRepo;

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

@@ -0,0 +1,301 @@
+import React, { Component, Fragment } from 'react';
+import { Button } from 'reactstrap';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext ,siteRoot } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import { Utils } from '../../../utils/utils';
+import EmptyTip from '../../../components/empty-tip';
+import moment from 'moment';
+import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
+import ModalPortal from '../../../components/modal-portal';
+import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import ReposNav from './repos-nav';
+import MainPanelTopbar from '../main-panel-topbar';
+
+const { trashReposExpireDays } = window.sysadmin.pageOptions;
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getPreviousPageList = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page - 1);
+  }
+
+  getNextPageList = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, pageInfo } = 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 deleted libraries.')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <p className="mt-4 small text-secondary">{gettext('Tip: libraries deleted {trashReposExpireDays} days ago will be cleaned automatically.').replace('{trashReposExpireDays}', trashReposExpireDays)}</p>
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="5%">{/*icon*/}</th>
+                <th width="40%">{gettext('Name')}</th>
+                <th width="25%">{gettext('Owner')}</th>
+                <th width="20%">{gettext('Deleted Time')}</th>
+                <th width="10%">{/*Operations*/}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  repo={item}
+                  onDeleteRepo={this.props.onDeleteRepo}
+                  onRestoreRepo={this.props.onRestoreRepo}
+                />);
+              })}
+            </tbody>
+          </table>
+          <Paginator
+            gotoPreviousPage={this.getPreviousPageList}
+            gotoNextPage={this.getNextPageList}
+            currentPage={pageInfo.current_page}
+            hasNextPage={pageInfo.has_next_page}
+            canResetPerPage={false}
+          />
+        </Fragment>
+      );
+
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      isDeleteRepoDialogOpen: false,
+      isRestoreRepoDialogOpen: false
+    };
+  }
+
+  onDeleteRepo = () => {
+    const repo = this.props.repo;
+    seafileAPI.sysAdminDeleteTrashRepo(repo.id).then((res) => {
+      this.props.onDeleteRepo(repo);
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.name);
+      toaster.success(msg);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onRestoreRepo = () => {
+    const repo = this.props.repo;
+    seafileAPI.sysAdminRestoreTrashRepo(repo.id).then((res) => {
+      this.props.onRestoreRepo(repo);
+      let message = gettext('Successfully restored the library.');
+      toaster.success(message);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  toggleDeleteRepoDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen});
+  }
+
+  toggleRestoreRepoDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isRestoreRepoDialogOpen: !this.state.isRestoreRepoDialogOpen});
+  }
+
+  render () {
+    const { repo } = this.props;
+    const { isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
+    const iconUrl = Utils.getLibIconUrl(repo);
+    const iconTitle = Utils.getLibIconTitle(repo);
+    const repoName = '<span class="op-target">' + Utils.HTMLescape(repo.name) + '</span>';
+
+    return (
+      <Fragment>
+        <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+          <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+          <td>{repo.name}</td>
+          <td>
+            {repo.owner.indexOf('@seafile_group') == -1 ?
+              <a href={`${siteRoot}useradmin/info/${encodeURIComponent(repo.owner)}/`}>{repo.owner_name}</a> : repo.group_name}
+          </td>
+          <td>{moment(repo.delete_time).fromNow()}</td>
+          <td>
+            {isOpIconShown && (
+              <Fragment>
+                <a href="#" className="op-icon sf2-icon-reply" title={gettext('Restore')} onClick={this.toggleRestoreRepoDialog}></a>
+                <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.toggleDeleteRepoDialog}></a>
+              </Fragment>
+            )}
+          </td>
+        </tr>
+        {isDeleteRepoDialogOpen &&
+          <ModalPortal>
+            <CommonOperationConfirmationDialog
+              title={gettext('Delete Library')}
+              message={gettext('Are you sure you want to delete {repo_name} completely?').replace('{repo_name}', repoName)}
+              executeOperation={this.onDeleteRepo}
+              confirmBtnText={gettext('Delete')}
+              toggleDialog={this.toggleDeleteRepoDialog}
+            />
+          </ModalPortal>
+        }
+        {isRestoreRepoDialogOpen &&
+          <ModalPortal>
+            <CommonOperationConfirmationDialog
+              title={gettext('Restore Library')}
+              message={gettext('Are you sure you want to restore %s ?').replace('%s', repoName)}
+              executeOperation={this.onRestoreRepo}
+              confirmBtnText={gettext('Restore')}
+              toggleDialog={this.toggleRestoreRepoDialog}
+            />
+          </ModalPortal>
+        }
+      </Fragment>
+    );
+  }
+}
+
+class TrashRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      repos: [],
+      pageInfo: {},
+      perPage: 100,
+      isCleanTrashDialogOpen: false
+    };
+  }
+
+  componentDidMount () {
+    this.getReposByPage(1);
+  }
+
+  toggleCleanTrashDialog = () => {
+    this.setState({isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen});
+  }
+
+  getReposByPage = (page) => {
+    let perPage = this.state.perPage;
+    seafileAPI.sysAdminListTrashRepos(page, perPage).then((res) => {
+      this.setState({
+        repos: res.data.repos,
+        pageInfo: res.data.page_info,
+        loading: false
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onDeleteRepo = (targetRepo) => {
+    let repos = this.state.repos.filter(repo => {
+      return repo.id != targetRepo.id;
+    });
+    this.setState({
+      repos: repos
+    });
+  }
+
+  onRestoreRepo = (targetRepo) => {
+    let repos = this.state.repos.filter(repo => {
+      return repo.id != targetRepo.id;
+    });
+    this.setState({
+      repos: repos
+    }); 
+  }
+
+  cleanTrash = () => {
+    seafileAPI.sysAdminCleanTrashRepos().then(res => {
+      this.setState({repos: []});
+      toaster.success(gettext('Successfully cleared trash.'));
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    const { isCleanTrashDialogOpen } = this.state;
+    return (
+      <Fragment>
+        {this.state.repos.length ? (
+          <MainPanelTopbar>
+            <Button className="operation-item" onClick={this.toggleCleanTrashDialog}>{gettext('Clean')}</Button>
+          </MainPanelTopbar>
+        ) : <MainPanelTopbar />
+        }
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <ReposNav currentItem="trash" />
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.repos}
+                pageInfo={this.state.pageInfo}
+                onDeleteRepo={this.onDeleteRepo}
+                onRestoreRepo={this.onRestoreRepo}
+                getListByPage={this.getReposByPage}
+              />
+            </div>
+          </div>
+        </div>
+        {isCleanTrashDialogOpen &&
+          <CommonOperationConfirmationDialog
+            title={gettext('Clear Trash')}
+            message={gettext('Are you sure you want to clear trash?')}
+            executeOperation={this.cleanTrash}
+            confirmBtnText={gettext('Clear')}
+            toggleDialog={this.toggleCleanTrashDialog} 
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default TrashRepos;

frontend/src/pages/sys-admin/side-panel.js

@@ -73,10 +73,14 @@ class SidePanel extends React.Component {
                 }
                 {canManageLibrary &&
                   <li className="nav-item">
-                    <a className='nav-link ellipsis' href={siteRoot + 'sysadmin/#all-libs/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
+                      to={siteRoot + 'sys/all-libraries/'}
+                      onClick={() => this.props.tabItemClick('libraries')}
+                    >
                       <span className="sf2-icon-library" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Libraries')}</span>
-                    </a>
+                    </Link>
                   </li>
                 }
                 {canManageUser &&

frontend/src/utils/utils.js

@@ -312,6 +312,16 @@ export const Utils = {
     }
   },
 
+  getAdminTemplateDirentIcon: function (dirent, isBig) {
+    let size = this.isHiDPI() ? 48 : 24;
+    size = isBig ? 192 : size;
+    if (dirent.is_file) {
+      return this.getFileIconUrl(dirent.obj_name, size);
+    } else {
+      return this.getFolderIconUrl();
+    }
+  },
+
   getFolderIconUrl: function(readonly = false, size) {
     if (!size) {
       size = Utils.isHiDPI() ? 48 : 24;

media/css/seahub_react.css

@@ -553,6 +553,7 @@ ul,ol,li {
   padding: 0 16px;
 }
 .cur-view-path.tab-nav-container .nav .nav-item .nav-link {
+  justify-content: center; /* make short word like 'All' in the center */
   margin: 0 0.75rem;
 }
 

seahub/templates/sysadmin/sysadmin_react_app.html

@@ -16,6 +16,8 @@
 			is_default_admin: {% if is_default_admin %} true {% else %} false {% endif %},
       enable_file_scan: {% if enable_file_scan %} true {% else %} false {% endif %},
       enable_work_weixin: {% if enable_work_weixin %} true {% else %} false {% endif %},
+      enableSysAdminViewRepo: {% if enable_sys_admin_view_repo %} true {% else %} false {% endif %},
+      trashReposExpireDays: {{ trash_repos_expire_days }},
 			admin_permissions: {
         "can_view_system_info": {% if user.admin_permissions.can_view_system_info %} true {% else %} false {% endif %},
         "can_view_statistic": {% if user.admin_permissions.can_view_statistic %} true {% else %} false {% endif %},

seahub/urls.py

@@ -659,6 +659,12 @@ urlpatterns = [
     url(r'^sys/mobile-devices/$', sysadmin_react_fake_view, name="sys_mobile_devices"),
     url(r'^sys/device-errors/$', sysadmin_react_fake_view, name="sys_device_errors"),
     url(r'^sys/web-settings/$', sysadmin_react_fake_view, name="sys_web_settings"),
+    url(r'^sys/all-libraries/$', sysadmin_react_fake_view, name="sys_all_libraries"),
+    url(r'^sys/system-library/$', sysadmin_react_fake_view, name="sys_system_library"),
+    url(r'^sys/trash-libraries/$', sysadmin_react_fake_view, name="sys_trash_libraries"),
+    url(r'^sys/libraries/(?P<repo_id>[-0-9a-f]{36})/$', sysadmin_react_fake_view, name="sys_libraries_template"),
+    url(r'^sys/libraries/(?P<repo_id>[-0-9a-f]{36})/(?P<repo_name>[^/]+)/(?P<path>.*)$', sysadmin_react_fake_view, name="sys_libraries_template_dirent"),
+
     url(r'^sys/work-weixin/$', sysadmin_react_fake_view, name="sys_work_weixin"),
 
     url(r'^client-login/$', client_token_login, name='client_token_login'),

seahub/views/sysadmin.py

@@ -138,7 +138,13 @@ def sysadmin(request):
 
 @login_required
 @sys_staff_required
-def sysadmin_react_fake_view(request):
+def sysadmin_react_fake_view(request, **kwargs):
+
+    try:
+        expire_days = seafile_api.get_server_config_int('library_trash', 'expire_days')
+    except Exception as e:
+        logger.error(e)
+        expire_days = -1
 
     return render(request, 'sysadmin/sysadmin_react_app.html', {
         'constance_enabled': dj_settings.CONSTANCE_ENABLED,
@@ -149,6 +155,8 @@ def sysadmin_react_fake_view(request):
         'enable_terms_and_conditions': config.ENABLE_TERMS_AND_CONDITIONS,
         'enable_file_scan': ENABLE_FILE_SCAN,
         'enable_work_weixin': ENABLE_WORK_WEIXIN,
+        'enable_sys_admin_view_repo': ENABLE_SYS_ADMIN_VIEW_REPO,
+        'trash_repos_expire_days': expire_days if expire_days > 0 else 30,
     })
 
 @login_required