change markdown view in metadata (#6746)

* change markdown viewer in metadata

* fix side nav click event

frontend/src/components/dir-view-mode/markdown-viewer-dialog.js

@@ -1,37 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
-import { Utils } from '../../utils/utils';
-import { siteRoot, mediaUrl } from '../../utils/constants';
+import { mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
 import './markdown-viewer-dialog.css';
 
 const propTypes = {
-  path: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  fileName: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isFileLoading: PropTypes.bool.isRequired,
   content: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
-  currentDirent: PropTypes.object,
-  onCloseMarkdownViewDialog: PropTypes.func
+  onCloseMarkdownViewDialog: PropTypes.func,
+  openMarkdownFile: PropTypes.func,
 };
 
 class MarkdownViewerDialog extends React.Component {
 
-  onOpenFile = (e) => {
-    e.preventDefault();
-    let { path, repoID, currentDirent } = this.props;
-    let { name } = currentDirent || {};
-    let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name;
-    window.open(newUrl, '_blank');
-  };
-
   render() {
-    const { currentDirent } = this.props;
-    const { name } = currentDirent || {};
     return (
       <Modal
         isOpen={true}
@@ -43,10 +33,10 @@ class MarkdownViewerDialog extends React.Component {
         <div className='seafile-markdown-viewer-modal-header'>
           <div className='seafile-markdown-viewer-modal-header-left-name'>
             <span><img src={`${mediaUrl}img/file/256/md.png`} width='24' alt='' /></span>
-            <span>{name}</span>
+            <span>{this.props.fileName}</span>
           </div>
           <div className='seafile-markdown-viewer-modal-header-right-tool'>
-            <span className='sf3-font sf3-font-open' onClick={this.onOpenFile}></span>
+            <span className='sf3-font sf3-font-open' onClick={this.props.openMarkdownFile}></span>
             <span className='sf3-font sf3-font-x-01' onClick={this.props.onCloseMarkdownViewDialog}></span>
           </div>
         </div>
@@ -59,7 +49,7 @@ class MarkdownViewerDialog extends React.Component {
             latestContributor={this.props.latestContributor}
             onLinkClick={this.props.onLinkClick}
             repoID={this.props.repoID}
-            path={this.props.path}
+            path={this.props.filePath}
           >
           </SeafileMarkdownViewer>
         </ModalBody>