Add internal-link to share-dialog (#3862)

* Add internal-link to share-dialog

* fix code

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

@@ -39,10 +39,10 @@ class InternalLinkDialog extends React.Component {
       this.setState({
         isOpen: true,
         smartLink: res.data.smart_link
-      }).catch(error => {
-        let errMessage = Utils.getErrorMsg(error);
-        toaster.danger(errMessage);
       });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
     });
   }
 

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+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 { Utils } from '../../utils/utils';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+};
+
+class InternalLink extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      smartLink: '',
+    };
+  }
+
+  componentDidMount() {
+    let repoID = this.props.repoID;
+    let path = this.props.path;
+    seafileAPI.getInternalLink(repoID, path).then(res => {
+      this.setState({
+        smartLink: res.data.smart_link
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  copyToClipBoard = () => {
+    copy(this.state.smartLink);
+    let message = gettext('Internal link has been copied to clipboard');
+    toaster.success(message), {
+      duration: 2
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <p className="tip mb-1">
+          {gettext('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.')}
+        </p>
+        <p>
+          <a target="_blank" href={this.state.smartLink}>{this.state.smartLink}</a>
+        </p>
+        <Button onClick={this.copyToClipBoard} color="primary" className="mt-2">{gettext('Copy')}</Button>
+      </div>
+    );
+  }
+}
+
+InternalLink.propTypes = propTypes;
+
+export default InternalLink;

frontend/src/components/dialog/share-dialog.js

@@ -6,6 +6,7 @@ import ShareToUser from './share-to-user';
 import ShareToGroup from './share-to-group';
 import GenerateShareLink from './generate-share-link';
 import GenerateUploadLink from './generate-upload-link';
+import InternalLink from './internal-link';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../loading';
 import { Utils } from '../../utils/utils';
@@ -78,7 +79,7 @@ class ShareDialog extends React.Component {
     const {repoEncrypted, userPerm, enableDirPrivateShare} = this.props;
     const enableShareLink = !repoEncrypted && canGenerateShareLink;
     const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw';
-    
+
     return (
       <Fragment>
         <div className="share-dialog-side">
@@ -150,16 +151,22 @@ class ShareDialog extends React.Component {
   }
 
   renderFileContent = () => {
+    let activeTab = this.state.activeTab;
+
     return (
       <Fragment>
         <div className="share-dialog-side">
           <Nav pills vertical>
             <NavItem>
-              <NavLink
-                className="active" onClick={() => {this.toggle.bind(this, 'shareLink');}}>
+              <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={(this.toggle.bind(this, 'shareLink'))}>
                 {gettext('Share Link')}
               </NavLink>
             </NavItem>
+            <NavItem>
+              <NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}>
+                {gettext('Internal Link')}
+              </NavLink>
+            </NavItem>
           </Nav>
         </div>
         <div className="share-dialog-main">
@@ -171,6 +178,12 @@ class ShareDialog extends React.Component {
                 closeShareDialog={this.props.toggleDialog}
               />
             </TabPane>
+            <TabPane tabId="internalLink">
+              <InternalLink 
+                repoID={this.props.repoID} 
+                path={this.props.itemPath} 
+              />
+            </TabPane>
           </TabContent>
         </div>
       </Fragment>