add link choice (#3450)

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import toaster from '../toast';
+import copy from '@seafile/seafile-editor/dist/utils/copy-to-clipboard';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  currentLinkHref: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+class ViewLinkDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  copyToClipBoard = () => {
+    copy(this.props.currentLinkHref);
+    let message = gettext('Link has been copied to clipboard');
+    toaster.success(message), {
+      duration: 2
+    };
+    this.props.toggle();
+  }
+
+  render() {
+    const href = this.props.currentLinkHref;
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Link')}</ModalHeader>
+        <ModalBody>
+          <p><a target="_blank" href={href}>{href}</a></p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>{' '}
+          <Button color="primary" onClick={this.copyToClipBoard}>{gettext('Copy')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ViewLinkDialog.propTypes = propTypes;
+
+export default ViewLinkDialog;

frontend/src/pages/org-admin/org-links.js

@@ -2,9 +2,10 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
-import { siteRoot, gettext } from '../../utils/constants';
+import { siteRoot, gettext, serviceURL } from '../../utils/constants';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import MainPanelTopbar from './main-panel-topbar';
+import ViewLinkDialog from '../../components/dialog/view-link-dialog';
 
 class OrgLinks extends React.Component {
 
@@ -15,6 +16,8 @@ class OrgLinks extends React.Component {
       page: 1,
       pageNext: false,
       isItemFreezed: false,
+      isShowLinkDialog: false,
+      currentLinkHref: '',
     };
   }
 
@@ -56,6 +59,21 @@ class OrgLinks extends React.Component {
     });
   }
 
+  openLinkDialog = (link) => {
+    let href;
+    if (link.name.indexOf('/') > -1) {
+      href = serviceURL + '/d/' + link.token + '/';
+    } else {
+      href = serviceURL + '/f/' + link.token + '/';
+    }
+    this.setState({ currentLinkHref: href });
+    this.toggleLinkDialog();
+  }
+
+  toggleLinkDialog = () => {
+    this.setState({isShowLinkDialog: !this.state.isShowLinkDialog});
+  }
+
   componentDidMount() {
     this.listOrgLinks(this.state.page);
   }
@@ -91,6 +109,7 @@ class OrgLinks extends React.Component {
                           onFreezedItem={this.onFreezedItem} 
                           onUnfreezedItem={this.onUnfreezedItem}
                           deleteOrgLink={this.deleteOrgLink}
+                          openLinkDialog={this.openLinkDialog}
                         />
                       </React.Fragment>
                     );
@@ -105,6 +124,9 @@ class OrgLinks extends React.Component {
             </div>
           </div>
         </div>
+        {this.state.isShowLinkDialog &&
+          <ViewLinkDialog currentLinkHref={this.state.currentLinkHref} toggle={this.toggleLinkDialog}/>
+        }
       </Fragment>
     );
   }
@@ -185,6 +207,7 @@ class RepoItem extends React.Component {
               />
               <DropdownMenu>
                 <DropdownItem onClick={deleteOrgLink.bind(this, link.token)}>{gettext('Delete')}</DropdownItem>
+                <DropdownItem onClick={this.props.openLinkDialog.bind(this, link)}>{gettext('View Link')}</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           }