[system admin] repos: added 'search all-repos & trash repos' (#4244)

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

@@ -25,6 +25,7 @@ import UserGroups from './users/user-groups';
 import AllRepos from './repos/all-repos';
 import SystemRepo from './repos/system-repo';
 import TrashRepos from './repos/trash-repos';
+import SearchRepos from './repos/search-repos';
 import DirView from './repos/dir-view';
 
 import Groups from './groups/groups';
@@ -91,7 +92,7 @@ class SysAdmin extends React.Component {
       },
       {
         tab: 'libraries',
-        urlPartList: ['all-libraries', 'system-library', 'trash-libraries', 'libraries/']
+        urlPartList: ['all-libraries', 'search-libraries', 'system-library', 'trash-libraries', 'libraries/']
       },
       {
         tab: 'users',
@@ -154,6 +155,7 @@ class SysAdmin extends React.Component {
             <AllRepos path={siteRoot + 'sys/all-libraries'} />
             <SystemRepo path={siteRoot + 'sys/system-library'} />
             <TrashRepos path={siteRoot + 'sys/trash-libraries'} />
+            <SearchRepos path={siteRoot + 'sys/search-libraries'} />
             <DirView path={siteRoot + 'sys/libraries/:repoID/*'} />
             <WebSettings path={siteRoot + 'sys/web-settings'} />
             <Notifications path={siteRoot + 'sys/notifications'} />

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Account from '../../components/common/account';
 
 const propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.object
 };
 
 class MainPanelTopbar extends Component {
@@ -18,6 +18,7 @@ class MainPanelTopbar extends Component {
           </div>
         </div>
         <div className="common-toolbar">
+         {this.props.search && this.props.search}
           <Account isAdminPanel={true} />
         </div>
       </div>

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

@@ -1,297 +1,15 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from '@reach/router';
+import { navigate } from '@reach/router';
 import { Button } from 'reactstrap';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { loginUrl, gettext, siteRoot, isPro } from '../../../utils/constants';
+import { loginUrl, gettext, siteRoot } 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 UserLink from '../user-link';
+import Search from '../search';
 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 <Link to={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</Link>;
-      } 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 ?
-              <Link to={`${siteRoot}sys/departments/${repo.owner_name}/`}>{repo.group_name}</Link> :
-              <UserLink email={repo.owner_email} name={repo.owner_name} />
-            }
-          </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>
-    );
-  }
-}
+import Content from './repos';
 
 class AllRepos extends Component {
 
@@ -375,11 +93,22 @@ class AllRepos extends Component {
     });
   }
 
+  getSearch = () => {
+    return <Search
+      placeholder={gettext('Search libraries by name')}
+      submit={this.searchRepos}
+    />;
+  }
+
+  searchRepos = (repoName) => {
+    navigate(`${siteRoot}sys/search-libraries/?name=${encodeURIComponent(repoName)}`);
+  }
+
   render() {
     let { isCreateRepoDialogOpen } = this.state;
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar search={this.getSearch()}>
           <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>          

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

@@ -0,0 +1,294 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { 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 UserLink from '../user-link';
+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>
+          {pageInfo && 
+          <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 <Link to={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</Link>;
+      } 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 ?
+              <Link to={`${siteRoot}sys/departments/${repo.owner_name}/`}>{repo.group_name}</Link> :
+              <UserLink email={repo.owner_email} name={repo.owner_name} />
+            }
+          </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>
+    );
+  }
+}
+
+export default Content;

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

@@ -0,0 +1,154 @@
+import React, { Component, Fragment } from 'react';
+import { Form, FormGroup, Input, Label, Col } from 'reactstrap';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext } from '../../../utils/constants';
+import MainPanelTopbar from '../main-panel-topbar';
+import Content from './repos';
+
+
+class SearchRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '',
+      owner: '',
+      isSubmitBtnActive: false, 
+      loading: true,
+      errorMsg: '',
+      repos: []
+    };
+  }
+
+  componentDidMount() {
+    let params = (new URL(document.location)).searchParams;
+    this.setState({
+      name: params.get('name') || '',
+      owner: params.get('owner') || ''
+    }, this.getRepos);
+  }
+
+  getRepos = () => {
+    const { name, owner } = this.state;
+    seafileAPI.sysAdminSearchRepos(name, owner).then((res) => {
+      this.setState({
+        loading: false,
+        repos: res.data.repos
+      });
+    }).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.')
+        }); 
+      }   
+    });
+  }
+
+  searchRepos = () => {
+    this.getRepos();
+  }
+
+  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
+    });
+  }
+
+  handleNameInputChange = (e) => {
+    this.setState({
+      name: e.target.value
+    }, this.checkSubmitBtnActive);
+  }
+
+  handleOwnerInputChange = (e) => {
+    this.setState({
+      owner: e.target.value
+    }, this.checkSubmitBtnActive);
+  }
+
+  checkSubmitBtnActive = () => {
+    const { name, owner } = this.state;
+    this.setState({
+      isSubmitBtnActive: name.trim() || owner.trim()
+    });
+  }
+
+  render() {
+    const { name, owner, isSubmitBtnActive } = this.state;
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Libraries')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <div className="mt-4 mb-6">
+                <h4 className="border-bottom font-weight-normal mb-2 pb-1">{gettext('Search Libraries')}</h4>
+                <p className="text-secondary small">{gettext('Tip: you can search by keyword in name or owner or both.')}</p>
+                <Form>
+                  <FormGroup row>
+                    <Label for="name" sm={1}>{gettext('Name')}</Label>
+                    <Col sm={5}>
+                      <Input type="text" name="name" id="name" value={name} onChange={this.handleNameInputChange} />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Label for="owner" sm={1}>{gettext('Owner')}</Label>
+                    <Col sm={5}>
+                      <Input type="text" name="owner" id="owner" value={owner} onChange={this.handleOwnerInputChange} />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm={{size: 5, offset: 1}}>
+                      <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.searchRepos}>{gettext('Submit')}</button>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </div>
+              <div className="mt-4 mb-6">
+                <h4 className="border-bottom font-weight-normal mb-2 pb-1">{gettext('Result')}</h4>
+                <Content
+                  loading={this.state.loading}
+                  errorMsg={this.state.errorMsg}
+                  items={this.state.repos}
+                  onDeleteRepo={this.onDeleteRepo}
+                  onTransferRepo={this.onTransferRepo}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default SearchRepos;

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

@@ -3,16 +3,17 @@ import { Button } from 'reactstrap';
 import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { gettext } from '../../../utils/constants';
+import { loginUrl, gettext } 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 CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import MainPanelTopbar from '../main-panel-topbar';
+import Search from '../search';
 import UserLink from '../user-link';
 import ReposNav from './repos-nav';
-import MainPanelTopbar from '../main-panel-topbar';
 
 const { trashReposExpireDays } = window.sysadmin.pageOptions;
 
@@ -66,6 +67,7 @@ class Content extends Component {
               })}
             </tbody>
           </table>
+          {pageInfo &&
           <Paginator
             gotoPreviousPage={this.getPreviousPageList}
             gotoNextPage={this.getNextPageList}
@@ -73,6 +75,7 @@ class Content extends Component {
             hasNextPage={pageInfo.has_next_page}
             canResetPerPage={false}
           />
+          }
         </Fragment>
       );
 
@@ -227,8 +230,25 @@ class TrashRepos extends Component {
         loading: false
       });
     }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
+      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.')
+        });
+      }
     });
   }
 
@@ -260,12 +280,50 @@ class TrashRepos extends Component {
     });
   }
 
+  getSearch = () => {
+    return <Search
+      placeholder={gettext('Search libraries by owner')}
+      submit={this.searchRepos}
+    />;
+  }
+
+  searchRepos = (owner) => {
+    seafileAPI.sysAdminSearchTrashRepos(owner).then((res) => {
+      this.setState({
+        repos: res.data.repos,
+        pageInfo: null,
+        errorMsg: '', // necessary!
+        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() {
     const { isCleanTrashDialogOpen } = this.state;
     return (
       <Fragment>
         {this.state.repos.length ? (
-          <MainPanelTopbar>
+          <MainPanelTopbar search={this.getSearch()}>
             <Button className="operation-item" onClick={this.toggleCleanTrashDialog}>{gettext('Clean')}</Button>
           </MainPanelTopbar>
         ) : <MainPanelTopbar />

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  placeholder: PropTypes.string.isRequired,
+  submit: PropTypes.func.isRequired
+};
+
+class Search extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      value: e.target.value
+    });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key == 'Enter') {
+      e.preventDefault();
+      this.handleSubmit();
+    }   
+  }
+
+  handleSubmit = () => {
+    const value = this.state.value.trim();
+    if (!value) {
+      return false;
+    }
+    this.props.submit(value);
+  }
+
+  render() {
+    return (
+      <div className="input-icon">
+        <i className="d-flex input-icon-addon fas fa-search"></i>
+        <input
+          type="text"
+          className="form-control search-input h-6 mr-1"
+          style={{width: '15rem'}}
+          placeholder={this.props.placeholder}
+          value={this.state.value}
+          onChange={this.handleInputChange}
+          onKeyPress={this.handleKeyPress}
+          autoComplete="off"
+        />
+      </div>
+    );
+  }
+}
+
+Search.propTypes = propTypes;
+
+export default Search;

seahub/urls.py

@@ -698,6 +698,7 @@ urlpatterns = [
     url(r'^sys/notifications/$', sysadmin_react_fake_view, name="sys_notifications"),
     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/search-libraries/$', sysadmin_react_fake_view, name="sys_search_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"),