modify a-simulate to a tag (#2581)

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import URLDecorator from '../../utils/url-decorator';
 import Toast from '../toast';
 import DirentMenu from './dirent-menu';
@@ -137,7 +138,8 @@ class DirentListItem extends React.Component {
     }
   }
 
-  onItemClick = () => {
+  onItemClick = (e) => {
+    e.preventDefault();
     this.props.onItemClick(this.props.dirent);
   }
 
@@ -365,7 +367,9 @@ class DirentListItem extends React.Component {
   }
 
   render() {
-    let { dirent } = this.props;
+    let { path, dirent } = this.props;
+    let direntPath = Utils.joinPath(path, dirent.name);
+    let href = siteRoot + 'wiki/lib/' + this.props.repoID + direntPath;
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
@@ -382,10 +386,10 @@ class DirentListItem extends React.Component {
               {dirent.is_locked && <img className="locked" src={siteRoot + 'media/img/file-locked-32.png'} alt={gettext('locked')}></img>}
             </div>
           </td>
-          <td className="name a-simulate">
+          <td className="name">
             {this.state.isRenameing ?
               <DirentRename dirent={dirent} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
-              <span onClick={this.onItemClick}>{dirent.name}</span>
+              <a href={href} onClick={this.onItemClick}>{dirent.name}</a>
             }
           </td>
           <td>

frontend/src/components/draft-list-view/draft-list-item.js

@@ -46,43 +46,30 @@ class DraftListItem extends React.Component {
     this.props.onMenuToggleClick(e, draft);
   }
 
-  onDraftEditClick = () => {
-    let draft = this.props.draft;
-    let filePath = draft.draft_file_path;
-    let repoID = draft.origin_repo_id;
-    let url =  siteRoot + 'lib/' + repoID + '/file' + filePath + '?mode=edit';
-    window.open(url);
-  }
-
-  onLibraryClick = () => {
-    let draft = this.props.draft;
-    let repoID = draft.origin_repo_id;
-    let url =  siteRoot + '#common/lib/' + repoID;
-    window.open(url);
-  }
-
-  onReviewClick = () => {
-    let draft = this.props.draft;
-    let url = siteRoot + 'drafts/review/' + draft.review_id + '/';
-    window.open(url);
-  }
-
   render() {
     let draft = this.props.draft;
-    let fileName = Utils.getFileName(draft.draft_file_path);
+    let repoID = draft.origin_repo_id;
+    let filePath = draft.draft_file_path;
+    let fileName = Utils.getFileName(filePath);
+    let draftUrl = siteRoot + 'lib/' + repoID + '/file' + filePath + '?mode=edit';
+    let libraryUrl = siteRoot + '#common/lib/' + repoID;
+    let reviewUrl = siteRoot + 'drafts/review/' + draft.review_id + '/';
     let localTime = moment.utc(draft.updated_at).toDate();
     localTime = moment(localTime).fromNow();
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon"><img src={siteRoot + 'media/img/file/192/txt.png'} alt='icon' /></td>
-        <td className="name a-simulate" >
-          <span onClick={this.onDraftEditClick}>{fileName}</span>
+        <td className="name" >
+          <a href={draftUrl} target="_blank">{fileName}</a>
         </td>
-        <td className="library a-simulate">
-          <span onClick={this.onLibraryClick}>{draft.repo_name}</span>
+        <td className="library">
+          <a href={libraryUrl} target="_blank">{draft.repo_name}</a>
         </td>
         <td className="review">
-          { draft.review_id && draft.review_status === 'open' ? <span className="a-simulate" onClick={this.onReviewClick}>#{draft.review_id}</span> : <span>--</span> }
+          {(draft.review_id && draft.review_status === 'open') ? 
+              <a href={reviewUrl} target="_blank">#{draft.review_id}</a> : 
+              <span>--</span> 
+          }
         </td>
         <td className="update">{localTime}</td>
         <td className="menu-toggle">

frontend/src/components/file-uploader/upload-list-item.js

@@ -9,7 +9,8 @@ const propTypes = {
 
 class UploadListItem extends React.Component {
 
-  onUploadCancel = () => {
+  onUploadCancel = (e) => {
+    e.preventDefault();
     let item = this.props.item;
     item.resumableFile.cancel();
     this.props.onUploadCancel(item);
@@ -44,7 +45,7 @@ class UploadListItem extends React.Component {
         </td>
         <td width="20%" className="upload-operation">
           { progress !== 100 ?
-            <span className="a-simulate" onClick={this.onUploadCancel}>{gettext(('cancel'))}</span> :
+            <a href="#" onClick={this.onUploadCancel}>{gettext(('cancel'))}</a> :
             <span>{gettext('uploaded')}</span>
           }
         </td>

frontend/src/components/review-list-view/review-list-item.js

@@ -89,12 +89,6 @@ class ReviewListItem extends React.Component {
     });
   }
 
-  onReviewsClick = () => {
-    let item = this.props.item;
-    let itemID = item.id;
-    window.open(siteRoot + 'drafts/review/' + itemID);
-  }
-
   getFileName(filePath) {
     let lastIndex = filePath.lastIndexOf('/');
     return filePath.slice(lastIndex+1);
@@ -103,13 +97,14 @@ class ReviewListItem extends React.Component {
   render() {
     let item = this.props.item;
     let fileName = this.getFileName(item.draft_file_path);
+    let reviewUrl = siteRoot + 'drafts/review/' + item.id;
     let localTime = moment.utc(item.updated_at).toDate();
     localTime = moment(localTime).fromNow();
 
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon" style={{width: '4%'}}><img src={siteRoot + 'media/img/file/192/txt.png'} alt="icon"/></td>
-        <td className="name a-simulate" style={{width: '26%'}} onClick={this.onReviewsClick}>{fileName}</td>
+        <td className="name" style={{width: '26%'}}><a href={reviewUrl} target="_blank">{fileName}</a></td>
         <td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>
         <td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} alt={item.user_name} /></td>

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

@@ -26,18 +26,22 @@ class TreeDirList extends React.Component {
     this.setState({highlight: false});
   }
 
-  onMainNodeClick = () => {
+  onMainNodeClick = (e) => {
+    e.preventDefault();
     this.props.onMainNodeClick(this.props.node);
   }
 
   render() {
     let node = this.props.node;
+    let href = siteRoot + 'wikis' + node.path;
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon">
           <img src={node.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt='icon'></img>
         </td>
-        <td className="name a-simulate" onClick={this.onMainNodeClick}>{node.name}</td>
+        <td className="name">
+          <a href={href} onClick={this.onMainNodeClick}>{node.name}</a>
+        </td>
         <td>{node.size}</td>
         <td title={node.last_update_time}>{node.last_update_time}</td>
       </tr>