add smart link

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

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
+import InternalLinkDialog from '../dialog/internal-link-dialog';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
@@ -9,6 +10,8 @@ const propTypes = {
   onPathClick: PropTypes.func.isRequired,
   onTabNavClick: PropTypes.func,
   pathPrefix: PropTypes.array,
+  repoID: PropTypes.string.isRequired,
+  isViewFile: PropTypes.bool.isRequired,
 };
 
 class DirPath extends React.Component {
@@ -78,6 +81,11 @@ class DirPath extends React.Component {
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}
+        { this.props.isViewFile && 
+          <InternalLinkDialog repoID={this.props.repoID}
+                              path={this.props.currentPath}
+          />
+        }
       </div>
     );
   }

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

@@ -11,6 +11,7 @@ const propTypes = {
   onPathClick: PropTypes.func.isRequired,
   onTabNavClick: PropTypes.func,
   pathPrefix: PropTypes.array,
+  isViewFile: PropTypes.bool.isRequired,
 };
 
 class CurDirPath extends React.Component {
@@ -24,6 +25,8 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath}
           onPathClick={this.props.onPathClick}
           onTabNavClick={this.props.onTabNavClick}
+          repoID={this.props.repoID}
+          isViewFile={this.props.isViewFile}
         />
         <DirTool 
           repoID={this.props.repoID}

frontend/src/components/dialog/internal-link-dialog.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import PropTypes from 'prop-types';
+import toaster from '../toast';
+import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import '../../css/internal-link.css';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+};
+
+class InternalLinkDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      smartLink: '',
+    };
+
+    this.toggle = this.toggle.bind(this);
+    this.getInternalLink = this.getInternalLink.bind(this);
+    this.copyToClipBoard = this.copyToClipBoard.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  }
+
+  getInternalLink() {
+    let repoID = this.props.repoID;
+    let path = this.props.path;
+    seafileAPI.getInternalLink(repoID, path).then(res => {
+      this.setState({
+        isOpen: true,
+        smartLink: res.data.smart_link
+      });
+    });
+  }
+
+  copyToClipBoard() {
+    copy(this.state.smartLink);
+    this.setState({
+      isOpen: false
+    });
+    let message = gettext('Copy internal link');
+    toaster.success(message), {
+      duration: 2
+    };
+  }
+
+  render() {
+    let internalLinkDesc = 'An internal link is a link to a file or folder that can be accessed by users with read permission to the file or folder.';
+    return (
+      <span className={'file-internal-link'} title={gettext('Internal Link')}>
+        <i className="fa fa-link" onClick={this.getInternalLink}></i>
+        <Modal isOpen={this.state.isOpen} toggle={this.toggle}>
+          <ModalHeader toggle={this.toggle}>{gettext('Internal Link')}</ModalHeader>
+          <ModalBody>
+            <p className="tip mb-1">
+              {gettext(internalLinkDesc)}
+            </p>
+            <p>
+              <a target="_blank" href={this.state.smartLink}>{this.state.smartLink}</a>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.copyToClipBoard}>{gettext('Copy')}</Button>{' '}
+            <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          </ModalFooter>
+        </Modal>
+      </span>
+    );
+  }
+}
+
+InternalLinkDialog.propTypes = propTypes;
+
+export default InternalLinkDialog;

frontend/src/css/internal-link.css

@@ -0,0 +1,10 @@
+.file-internal-link {
+    font-size: .875rem;
+    cursor: pointer;
+    margin-left: .5rem;
+    vertical-align: text-bottom;
+}
+
+.file-internal-link {
+    color: #585858;
+}

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -208,6 +208,7 @@ class MainPanel extends Component {
                   currentPath={this.props.path} 
                   permission={permission} 
                   onPathClick={this.onMainNavBarClick}
+                  isViewFile={this.props.isViewFile}
                 />
               )}
             </div>