Optimize internal link dialog cod (#5466)

* optimize code

* optimize code

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

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { UncontrolledTooltip } from 'reactstrap';
 import { siteRoot, gettext } from '../../utils/constants';
-import InternalLinkDialog from '../dialog/internal-link-dialog';
 import { Utils } from '../../utils/utils';
+import { InternalLinkOperation } from '../operations';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
@@ -103,12 +103,9 @@ 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}
-          />
-        }
+        {this.props.isViewFile && (
+          <InternalLinkOperation repoID={this.props.repoID} path={this.props.currentPath}/>
+        )}
         {(this.props.isViewFile && fileTags.length !== 0) &&
           <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1">
             {fileTags.map((fileTag, index) => {

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

@@ -7,69 +7,63 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 
-import '../../css/internal-link.css';
-
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  onInternalLinkDialogToggle: PropTypes.func.isRequired,
 };
 
 class InternalLinkDialog extends React.Component {
+
   constructor(props) {
     super(props);
     this.state = {
-      isOpen: false,
       smartLink: '',
+      isLoading: true,
     };
-
-    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,
-    });
+  componentDidMount() {
+    this.getInternalLink();
   }
 
-  getInternalLink() {
+  getInternalLink = () => {
     let repoID = this.props.repoID;
     let path = this.props.path;
     seafileAPI.getInternalLink(repoID, path).then(res => {
+      const { smart_link } = res.data;
       this.setState({
-        isOpen: true,
-        smartLink: res.data.smart_link
+        isLoading: false,
+        smartLink: smart_link,
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
+      this.setState({isLoading: false});
     });
   }
 
-  copyToClipBoard() {
+  copyToClipBoard = () => {
     copy(this.state.smartLink);
-    this.setState({
-      isOpen: false
-    });
-    let message = gettext('Internal link has been copied to clipboard');
-    toaster.success(message), {
-      duration: 2
-    };
+    const message = gettext('Internal link has been copied to clipboard');
+    toaster.success(message, {duration: 2});
+    this.toggle();
+  }
+
+  toggle = () => {
+    this.props.onInternalLinkDialogToggle();
   }
 
   render() {
+    const tipMessage = 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.');
     return (
       <Fragment>
-        <i title={gettext('Internal Link')} role="button" tabIndex="0" aria-label={gettext('Internal Link')} className="file-internal-link fa fa-link" onClick={this.getInternalLink}></i>
-        <Modal isOpen={this.state.isOpen} toggle={this.toggle}>
+        <Modal isOpen={true} toggle={this.toggle}>
           <ModalHeader toggle={this.toggle}>{gettext('Internal Link')}</ModalHeader>
           <ModalBody>
-            <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 className="tip mb-1">{tipMessage}</p>
             <p>
-              <a target="_blank" href={this.state.smartLink}>{this.state.smartLink}</a>
+              <a target="_blank" href={this.state.smartLink} rel='noreferrer'>{this.state.smartLink}</a>
             </p>
           </ModalBody>
           <ModalFooter>

frontend/src/components/file-view/file-info.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { isPro, gettext, mediaUrl, siteRoot } from '../../utils/constants';
-import InternalLinkDialog from '../dialog/internal-link-dialog';
+import { InternalLinkOperation } from '../operations';
 
 const propTypes = {
   toggleStar: PropTypes.func.isRequired,
@@ -40,7 +40,7 @@ class FileInfo extends React.PureComponent {
             aria-label={isStarred ? gettext('Unstar') : gettext('Star')}
             onClick={this.toggleStar}>
           </a>
-          <InternalLinkDialog repoID={repoID} path={filePath} />
+          <InternalLinkOperation repoID={repoID} path={filePath} />
           {(isPro && isLocked) &&
             <img className="file-locked-icon" width="16"
               src={`${mediaUrl}img/file-locked-32.png`}

frontend/src/components/operations/index.js

@@ -0,0 +1,6 @@
+import InternalLinkOperation from './internal-link-operation';
+import './style.css';
+
+export {
+  InternalLinkOperation,
+};

frontend/src/components/operations/internal-link-operation/index.js

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../../utils/constants';
+import InternalLinkDialog from '../../dialog/internal-link-dialog';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+class InternalLinkOperation extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowInternalLinkDialog: false
+    };
+  }
+
+  onInternalLinkDialogToggle = () => {
+    this.setState({isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog});
+  }
+
+  render() {
+    const { repoID, path } = this.props;
+    const { isShowInternalLinkDialog } = this.state;
+    const title = gettext('Internal Link');
+    return (
+      <Fragment>
+        <span className='dialog-operation'>
+          <i className="file-internal-link fa fa-link" title={title} aria-label={title} onClick={this.onInternalLinkDialogToggle}/>
+        </span>
+        {isShowInternalLinkDialog && (
+          <InternalLinkDialog
+            repoID={repoID}
+            path={path}
+            onInternalLinkDialogToggle={this.onInternalLinkDialogToggle}
+          />
+        )}
+      </Fragment>
+    );
+  }
+
+}
+
+InternalLinkOperation.propTypes = propTypes;
+
+export default InternalLinkOperation;

frontend/src/components/operations/style.css

@@ -0,0 +1,17 @@
+.dialog-operation {
+  display: flex;
+  align-items: center;
+}
+
+.dialog-operation .file-internal-link {
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  margin-left: 0.5rem;
+  color: #999;
+  margin-top: 2px;
+}
+
+.dialog-operation .file-internal-link:hover {
+  color: #333;
+}