[file view] added 'share' (#3108)

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

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup } from 'reactstrap';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import ModalPortal from '../modal-portal';
+import ShareDialog from '../dialog/share-dialog';
 
 const propTypes = { 
   isLocked: PropTypes.bool.isRequired,
@@ -13,8 +15,9 @@ const propTypes = {
 };
 
 const { 
-  canLockUnlockFile,
-  repoID, repoName, parentDir, filePerm, filePath,
+  canLockUnlockFile, canGenerateShareLink,
+  repoID, repoName, repoEncrypted, parentDir, filePerm, filePath,
+  fileName,
   canEditFile, err,
   fileEnc, // for 'edit', not undefined only for some kinds of files (e.g. text file)
   canDownloadFile, enableComment
@@ -22,6 +25,17 @@ const {
 
 class FileToolbar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShareDialogOpen: false
+    };
+  }
+
+  toggleShareDialog = () => {
+    this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
+  }
+
   render() {
     const { isLocked, lockedByMe } = this.props; 
 
@@ -38,59 +52,90 @@ class FileToolbar extends React.Component {
         lockUnlockIcon = 'fa fa-unlock';
       }   
     }   
+
+    let showShareBtn = false;
+    if (!repoEncrypted &&
+      (filePerm == 'rw' || filePerm == 'r') && canGenerateShareLink) {
+      showShareBtn = true;
+    }
+
     return (
-      <ButtonGroup className="align-self-center">
-        <IconButton
-          id="open-parent-folder"
-          icon="fa fa-folder-open"
-          text={gettext('Open parent folder')}
-          tag="a"
-          href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
-        />
-        {showLockUnlockBtn && (
+      <Fragment>
+        <ButtonGroup className="align-self-center">
           <IconButton
-            id="lock-unlock-file"
-            icon={lockUnlockIcon}
-            text={lockUnlockText}
-            onClick={this.props.toggleLockFile}
-          />
-        )}
-        {filePerm == 'rw' && (
-          <IconButton
-            id="history"
-            icon="fa fa-history"
-            text={gettext('History')}
+            id="open-parent-folder"
+            icon="fa fa-folder-open"
+            text={gettext('Open parent folder')}
             tag="a"
-            href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
+            href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
           />
-        )}
-        {(canEditFile && !err) && (
-          <IconButton
-            id="edit"
-            icon="fa fa-edit"
-            text={gettext('Edit')}
-            tag="a"
-            href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`}
+          {showLockUnlockBtn && (
+            <IconButton
+              id="lock-unlock-file"
+              icon={lockUnlockIcon}
+              text={lockUnlockText}
+              onClick={this.props.toggleLockFile}
+            />
+          )}
+          {showShareBtn && (
+            <IconButton
+              id="share-file"
+              icon='fa fa-share-alt'
+              text={gettext('Share')}
+              onClick={this.toggleShareDialog}
+            />
+          )}
+          {filePerm == 'rw' && (
+            <IconButton
+              id="history"
+              icon="fa fa-history"
+              text={gettext('History')}
+              tag="a"
+              href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
+            />
+          )}
+          {(canEditFile && !err) && (
+            <IconButton
+              id="edit"
+              icon="fa fa-edit"
+              text={gettext('Edit')}
+              tag="a"
+              href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`}
+            />
+          )}
+          {canDownloadFile && (
+            <IconButton
+              id="download-file"
+              icon="fa fa-download"
+              text={gettext('Download')}
+              tag="a"
+              href="?dl=1"
+            />
+          )}
+          {enableComment && (
+            <IconButton
+              id="comment"
+              icon="fa fa-comments"
+              text={gettext('Comment')}
+              onClick={this.props.toggleCommentPanel}
+            />
+          )}
+        </ButtonGroup>
+
+        {this.state.isShareDialogOpen &&
+        <ModalPortal>
+          <ShareDialog
+            itemType='file'
+            itemName={fileName}
+            itemPath={filePath}
+            userPerm={filePerm}
+            repoID={repoID}
+            repoEncrypted={false}
+            toggleDialog={this.toggleShareDialog}
           />
-        )}
-        {canDownloadFile && (
-          <IconButton
-            id="download-file"
-            icon="fa fa-download"
-            text={gettext('Download')}
-            tag="a"
-            href="?dl=1"
-          />
-        )}
-        {enableComment && (
-          <IconButton
-            id="comment"
-            icon="fa fa-comments"
-            text={gettext('Comment')}
-            onClick={this.props.toggleCommentPanel}
-          />
-        )}
-      </ButtonGroup>
+        </ModalPortal>
+        }
+      </Fragment>
     );
   }
 }