add lock button and adjust sequence

frontend/src/components/toolbar/markdown-viewer-toolbar.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, canGenerateShareLink } from '../../utils/constants';
+import { gettext, canGenerateShareLink, isPro, mediaUrl } from '../../utils/constants';
 import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbarcomponent/editorToolBar';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/file-info';
 
+const { canLockUnlockFile } = window.app.pageOptions;
 const { seafileCollabServer } = window.app.config;
 
 const propTypes = {
@@ -27,6 +28,9 @@ const propTypes = {
   contentChanged: PropTypes.bool.isRequired,
   saving: PropTypes.bool.isRequired,
   showDraftSaved: PropTypes.bool.isRequired,
+  isLocked: PropTypes.bool.isRequired,
+  lockedByMe: PropTypes.bool.isRequired,
+  toggleLockFile: PropTypes.func.isRequired,
 };
 
 const MoreMenuPropTypes = {
@@ -98,7 +102,7 @@ class MarkdownViewerToolbar extends React.Component {
   }
 
   render() {
-    let { contentChanged, saving } = this.props;
+    let { contentChanged, saving, isLocked, lockedByMe } = this.props;
     let canPublishDraft = this.props.fileInfo.permission == 'rw';
     let canCreateDraft = canPublishDraft && (!this.props.hasDraft && !this.props.isDraft && this.props.isDocs);
 
@@ -111,6 +115,9 @@ class MarkdownViewerToolbar extends React.Component {
               editorUtilities={this.props.editorUtilities}
               fileInfo={this.props.fileInfo}
               showDraftSaved={this.props.showDraftSaved}
+              isLocked={this.props.isLocked}
+              isPro={isPro} mediaUrl={mediaUrl}
+              isStarred={this.props.fileInfo.isStarred}
             />
             {(this.props.hasDraft && !this.props.isDraft) &&
               <div className='seafile-btn-view-review'>
@@ -141,12 +148,18 @@ class MarkdownViewerToolbar extends React.Component {
                 />
               }
               <ButtonGroup>
+                <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
+                  icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
+                {(canLockUnlockFile && !isLocked) &&
+                  <IconButton id="lock-unlock-file" icon='fa fa-lock' text={gettext('Lock')} onMouseDown={this.props.toggleLockFile}/>
+                }
+                {(canLockUnlockFile && lockedByMe) &&
+                  <IconButton id="lock-unlock-file" icon='fa fa-unlock' text={gettext('Unlock')} onMouseDown={this.props.toggleLockFile}/>
+                }
                 {canGenerateShareLink && 
                   <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
                   onMouseDown={this.props.toggleShareLinkDialog}/>
                 }
-                <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
-                  icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
                 {
                   this.props.showFileHistory && <IconButton id={'historyButton'}
                     text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>

frontend/src/markdown-editor.js

@@ -18,7 +18,7 @@ import './css/markdown-viewer/markdown-editor.css';
 
 const CryptoJS = require('crypto-js');
 const URL = require('url-parse');
-const { repoID, repoName, filePath, fileName, mode, draftID, isDraft, hasDraft } = window.app.pageOptions;
+const { repoID, repoName, filePath, fileName, mode, draftID, isDraft, hasDraft, isLocked, lockedByMe } = window.app.pageOptions;
 const { siteRoot, serviceUrl, seafileCollabServer } = window.app.config;
 const userInfo = window.app.userInfo;
 const userName = userInfo.username;
@@ -292,6 +292,8 @@ class MarkdownEditor extends React.Component {
       readOnly: true,
       contentChanged: false,
       saving: false,
+      isLocked: isLocked,
+      lockedByMe: lockedByMe,
     };
 
     if (this.state.collabServer) {
@@ -305,6 +307,19 @@ class MarkdownEditor extends React.Component {
     }
   }
 
+  toggleLockFile = () => {
+    const { repoID, path } = this.state.fileInfo;
+    if (this.state.isLocked) {
+      seafileAPI.unlockfile(repoID, path).then((res) => {
+        this.setState({ isLocked: false, lockedByMe: false });
+      });
+    } else {
+      seafileAPI.lockfile(repoID, path).then((res) => {
+        this.setState({ isLocked: true, lockedByMe: true });
+      });
+    }
+  }
+
   emitSwitchEditor = (is_editing=false) => {
     if (userInfo && this.state.collabServer) {
       const { repoID, path } = this.state.fileInfo;
@@ -690,6 +705,9 @@ class MarkdownEditor extends React.Component {
             contentChanged={this.state.contentChanged}
             saving={this.state.saving}
             showDraftSaved={this.state.showDraftSaved}
+            isLocked={this.state.isLocked}
+            lockedByMe={this.state.lockedByMe}
+            toggleLockFile={this.toggleLockFile}
           />
           <SeafileEditor
             fileInfo={this.state.fileInfo}

seahub/templates/view_file_markdown.html

@@ -42,6 +42,9 @@
                   shareLinkExpireDaysMin: '{{ share_link_expire_days_min }}',
                   shareLinkExpireDaysMax: '{{ share_link_expire_days_max }}',
                   canGenerateShareLink: {% if user.permissions.can_generate_share_link %} true {% else %} false {% endif %},
+                  isLocked: {% if file_locked %}true{% else %}false{% endif %},
+                  lockedByMe: {% if locked_by_me %}true{% else %}false{% endif %},
+                  canLockUnlockFile: {% if can_lock_unlock_file %}true{% else %}false{% endif %},
               },
              userInfo: {
                username: '{{ user.username }}',