[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,
+  canLockUnlockFile, canGenerateShareLink,
-  repoID, repoName, parentDir, filePerm, filePath,
+  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">
+      <Fragment>
-        <IconButton
+        <ButtonGroup className="align-self-center">
-          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 && (
           <IconButton
-            id="lock-unlock-file"
+            id="open-parent-folder"
-            icon={lockUnlockIcon}
+            icon="fa fa-folder-open"
-            text={lockUnlockText}
+            text={gettext('Open parent folder')}
-            onClick={this.props.toggleLockFile}
-          />
-        )}
-        {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)}`}
+            href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
           />
-        )}
+          {showLockUnlockBtn && (
-        {(canEditFile && !err) && (
+            <IconButton
-          <IconButton
+              id="lock-unlock-file"
-            id="edit"
+              icon={lockUnlockIcon}
-            icon="fa fa-edit"
+              text={lockUnlockText}
-            text={gettext('Edit')}
+              onClick={this.props.toggleLockFile}
-            tag="a"
+            />
-            href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`}
+          )}
+          {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}
           />
-        )}
+        </ModalPortal>
-        {canDownloadFile && (
+        }
-          <IconButton
+      </Fragment>
-            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>
     );
   }
 }

seahub/templates/file_view_react.html

@@ -10,6 +10,10 @@ window.app.pageOptions = {
   username: '{{ user.username|escapejs }}',
   userNickName: '{{request.user.username|email2nickname|escapejs}}',
 
+  canGenerateShareLink: {% if user.permissions.can_generate_share_link %} true {% else %} false {% endif %},
+  shareLinkExpireDaysMin: {{ share_link_expire_days_min }},
+  shareLinkExpireDaysMax: {{ share_link_expire_days_max }},
+
   // for all types of files
   fileName: '{{ filename|escapejs }}',
   isStarred: {% if is_starred %}true{% else %}false{% endif %},
@@ -19,6 +23,7 @@ window.app.pageOptions = {
   lastModificationTime: '{{ last_modified }}',
   repoID: '{{ repo.id }}',
   repoName: '{{ repo.name|escapejs }}',
+  repoEncrypted: {% if repo.encrypted %}true{% else %}false{% endif %},
   filePath: '{{ path|escapejs }}',
   filePerm: '{{ file_perm }}',
   parentDir: '{{ parent_dir|escapejs }}',

seahub/views/file.py

@@ -512,6 +512,8 @@ def view_lib_file(request, repo_id, path):
         'highlight_keyword': settings.HIGHLIGHT_KEYWORD,
         'enable_file_comment': settings.ENABLE_FILE_COMMENT,
         'enable_watermark': ENABLE_WATERMARK,
+        'share_link_expire_days_min': SHARE_LINK_EXPIRE_DAYS_MIN,
+        'share_link_expire_days_max': SHARE_LINK_EXPIRE_DAYS_MAX,
         'can_download_file': parse_repo_perm(permission).can_download,
         'seafile_collab_server': SEAFILE_COLLAB_SERVER,
     }