Merge pull request #2634 from haiwen/bug-repair

Bug repair

frontend/src/app.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from '@reach/router';
-import { siteRoot } from './utils/constants';
+import { Router, Link } from '@reach/router';
+import { gettext, siteRoot } from './utils/constants';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
 import DraftsView from './pages/drafts/drafts-view';
@@ -52,8 +52,8 @@ class App extends Component {
       draftList:[],
       isLoadingDraft: true,
       currentTab: '/',
+      pathPrefix: null,
     };
-    this.currentTab = ''; //just for refresh brower
   }
 
   componentDidMount() {
@@ -101,12 +101,42 @@ class App extends Component {
     //todos
   }
 
-  tabItemClick = (tabName) => {
-    this.setState({currentTab: tabName});
+  tabItemClick = (tabName, groupID) => {
+    let pathPrefix = this.generatorPrefix(tabName, groupID);
+    this.setState({
+      currentTab: tabName,
+      pathPrefix: pathPrefix
+    });
   } 
 
-  updateCurrentTab = (tabName) => {
-    this.currentTab = tabName;
+  generatorPrefix = (currentTab, groupID) => {
+    if (groupID) { //group
+      return (
+        <Fragment>
+          <Link to={siteRoot + 'groups/'} className="normal">{gettext('Groups')}</Link>
+          <span className="path-split">/</span>
+          <Link to={siteRoot + 'group/' + groupID + '/'} className="normal">{currentTab}</Link>
+          <span className="path-split">/</span>
+        </Fragment>
+      );
+    }
+    if (currentTab === 'my-libs') {
+      return (
+        <Fragment>
+          <Link to={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</Link>
+          <span className="path-split">/</span>
+        </Fragment>
+      );
+    }
+    if (currentTab === 'shared-libs') {
+      return (
+        <Fragment>
+          <Link to={siteRoot + 'shared-libs/'} className="normal">{gettext('Shared with me')}</Link>
+          <span className="path-split">/</span>
+        </Fragment>
+      );
+    }
+    return null;
   }
 
   render() {
@@ -141,7 +171,7 @@ class App extends Component {
             <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <DirView path={siteRoot + 'library/:repoID/*'} onMenuClick={this.onShowSidePanel} updateCurrentTab={this.updateCurrentTab}/>
+            <DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel}/>
             <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
             <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
             <WikisWrapper path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>

frontend/src/components/cur-dir-path/dir-path.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, gettext } from '../../utils/constants';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
+  pathPrefix: PropTypes.object,
   currentPath: PropTypes.string.isRequired,
   onPathClick: PropTypes.func.isRequired,
 };
@@ -45,8 +46,13 @@ class DirPath extends React.Component {
     let pathElem = this.turnPathToLink(currentPath);
     return (
       <div className="path-containter">
+        {this.props.pathPrefix ? 
+          this.props.pathPrefix :
+            <Fragment>
               <a href={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</a>
               <span className="path-split">/</span>
+            </Fragment>       
+        }
         {currentPath === '/' ?
           <span>{repoName}</span>:
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>

frontend/src/components/cur-dir-path/index.js

@@ -5,6 +5,7 @@ import DirTool from './dir-tool';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
+  pathPrefix: PropTypes.object.isRequired,
   repoName: PropTypes.string.isRequired,
   permission: PropTypes.bool.isRequired,
   currentPath: PropTypes.string.isRequired,
@@ -18,6 +19,7 @@ class CurDirPath extends React.Component {
       <Fragment>
         <DirPath 
           repoName={this.props.repoName}
+          pathPrefix={this.props.pathPrefix}
           currentPath={this.props.currentPath}
           onPathClick={this.props.onPathClick}
         />

frontend/src/components/dir-view/dir-panel.js

@@ -14,6 +14,7 @@ import FileUploader from '../file-uploader/file-uploader';
 
 const propTypes = {
   currentRepo: PropTypes.object,
+  pathPrefix: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
@@ -147,6 +148,7 @@ class DirPanel extends React.Component {
               <CurDirPath 
                 repoID={this.props.repoID}
                 repoName={this.props.repoName}
+                pathPrefix={this.props.pathPrefix}
                 currentPath={this.props.path} 
                 permission={this.props.permission}
                 onPathClick={this.props.onPathClick}

frontend/src/components/dir-view/dir-view.js

@@ -11,8 +11,8 @@ import FileTag from '../../models/file-tag';
 import Repo from '../../models/repo';
 
 const propTypes = {
+  pathPrefix: PropTypes.object.isRequired,
   onMenuClick: PropTypes.func.isRequired,
-  updateCurrentTab: PropTypes.func.isRequired,
 };
 
 class DirView extends React.Component {
@@ -54,14 +54,8 @@ class DirView extends React.Component {
         currentRepo: repo,
       });
 
-      let repoName = encodeURIComponent(repo.repo_name);
-      let index = location.href.indexOf(repoName) + repoName.length;
-      let path = decodeURIComponent(location.href.slice(index));
-      this.setState({path: path});
-      this.updateDirentList(path);
+      this.updateDirentList(this.state.path);
     });
-
-    this.props.updateCurrentTab('my-libs'); // just for refersh brower;
   }
   
   updateDirentList = (filePath) => {
@@ -430,6 +424,7 @@ class DirView extends React.Component {
   render() {
     return (
       <DirPanel 
+        pathPrefix={this.props.pathPrefix}
         currentRepo={this.state.currentRepo}
         path={this.state.path}
         pathExist={this.state.pathExit}

frontend/src/components/main-side-nav.js

@@ -52,8 +52,8 @@ class MainSideNav extends React.Component {
     });
   }
 
-  tabItemClick = (param) => {
-    this.props.tabItemClick(param);
+  tabItemClick = (param, id) => {
+    this.props.tabItemClick(param, id);
   }
 
   getActiveClass = (tab) => {
@@ -76,7 +76,7 @@ class MainSideNav extends React.Component {
         {this.state.groupItems.map(item => {
           return (
             <li key={item.id} className="nav-item"> 
-              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.id)}`} onClick={() => this.tabItemClick(item.id)}>
+              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={() => this.tabItemClick(item.name, item.id)}>
                 <span className="sharp" aria-hidden="true">#</span>
                 <span className="nav-text">{item.name}</span>
               </Link>

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { Link } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
 
@@ -74,14 +75,13 @@ class SharedRepoListItem extends React.Component {
 
   getRepoComputeParams = () => {
     let repo = this.props.repo;
-    let currentGroup = this.props.currentGroup; //todo--change to libray
-    let isReadyOnly = false;
+    let isReadOnly = false;
     if (repo.permission === 'r' || repo.permission === 'preview') {
-      isReadyOnly = true;
+      isReadOnly = true;
     }
     let iconUrl = Utils.getLibIconUrl({
-      is_encryted: repo.encrypted, 
-      is_readyonly: isReadyOnly,
+      is_encrypted: repo.encrypted, 
+      is_readonly: isReadOnly,
       size: Utils.isHiDPI() ? 48 : 24
     });
     let iconTitle = Utils.getLibIconTitle({
@@ -91,7 +91,7 @@ class SharedRepoListItem extends React.Component {
     });
 
     //todo change to library; div-view is not compatibility
-    let libPath = `${siteRoot}#group/${currentGroup.id}/lib/${this.props.repo.repo_id}/`;
+    let libPath = `${siteRoot}library/${this.props.repo.repo_id}/`;
 
     return { iconUrl, iconTitle, libPath };
   }
@@ -269,7 +269,7 @@ class SharedRepoListItem extends React.Component {
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
-        <td><a href={libPath}>{repo.repo_name}</a></td>
+        <td><Link to={libPath}>{repo.repo_name}</Link></td>
         <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
         <td>{repo.size}</td>
         <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>

frontend/src/css/groups.css

@@ -25,3 +25,8 @@
     font-size: 22px;
     margin: 3px 0 0 10px;
 }
+
+.department-group-icon {
+  margin-left: 0.25rem;
+  color:#888;
+}

frontend/src/pages/groups/group-view.js

@@ -1,6 +1,7 @@
 import React,{ Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, siteRoot, username, loginUrl } from '../../utils/constants';
+import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../../components/loading';
 import ModalPortal from '../../components/modal-portal';
@@ -202,11 +203,11 @@ class GroupView extends React.Component {
               {currentGroup && (
                 <Fragment>
                   <div className="path-container">
-                    <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
+                    <Link to={`${siteRoot}groups/`}>{gettext("Groups")}</Link>
                     <span className="path-split">/</span>
                     <span>{currentGroup.name}</span>
                     {currentGroup.parent_group_id !== 0 && (
-                      <span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
+                      <span className="department-group-icon fas fa-building" title={gettext("This is a special group representing a department.")}></span>
                     )}
                   </div>
                   <div className="path-tool">

frontend/src/pages/shared-libs/shared-libs.js

@@ -26,8 +26,8 @@ class Content extends Component {
       const desktopThead = (
         <thead>
           <tr>
-            <th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
-            <th width="34%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
+            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="38%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
             <th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
             <th width="14%">{gettext("Size")}</th>
             <th width="18%">{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>

media/css/seahub_react.css

@@ -820,7 +820,7 @@ table .star .empty {
 table .rename-container input {
     box-sizing: content-box;
     padding: 2px 3px;
-    width: 16.25rem;
+    width: 15rem;
     height: 22px;
     line-height: 19px;
     border-radius: 2px;