update comment panel

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -38,6 +38,7 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirListView extends React.Component {
@@ -96,6 +97,7 @@ class DirListView extends React.Component {
           onAddFile={this.props.onAddFile}
           onAddFolder={this.props.onAddFolder}
           onFileTagChanged={this.props.onFileTagChanged}
+          showDirentDetail={this.props.showDirentDetail}
         />
       </Fragment>
     );

frontend/src/components/dirent-detail/detail-comments-list.js

@@ -0,0 +1,226 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import '../../css/comments-list.css';
+
+const { username } = window.app.pageOptions;
+
+const DetailCommentListPropTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+};
+
+class DetailCommentList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentsList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.listComments();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.filePath !== this.props.filePath) {
+      this.listComments(nextProps.filePath);
+    }
+  }
+
+  listComments = (filePath) => {
+    seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
+      this.setState({ commentsList: res.data.comments });
+    });
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({ comment: event.target.value });
+  }
+
+  submitComment = () => {
+    let comment = this.refs.commentTextarea.value;
+    const { repoID, filePath } = this.props;
+    if (comment.trim()) {
+      seafileAPI.postComment(repoID, filePath, comment.trim()).then(() => {
+        this.listComments();
+      });
+    }
+    this.refs.commentTextarea.value = '';
+  }
+
+  resolveComment = (event) => {
+    const { repoID } = this.props;
+    seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
+      this.listComments();
+    });
+  }
+
+  deleteComment = (event) => {
+    const { repoID } = this.props;
+    seafileAPI.deleteComment(repoID, event.target.id).then(() => {
+      this.listComments();
+    });
+  }
+
+  editComment = (commentID, newComment) => {
+    const { repoID } = this.props;
+    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then(() => {
+      this.listComments();
+    });
+  }
+
+  render() {
+    return (
+      <div className="seafile-comment detail-comments h-100 w-100">
+        <ul className="seafile-comment-list">
+          {this.state.commentsList.length > 0 &&
+            this.state.commentsList.map((item, index = 0, arr) => {
+              let oldTime = (new Date(item.created_at)).getTime();
+              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+              return (
+                <React.Fragment key={item.id}>
+                  <CommentItem
+                    item={item} time={time} deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment} editComment={this.editComment}
+                  />
+                </React.Fragment>
+              );
+            })
+          }
+          {(this.state.commentsList.length == 0 ) &&
+            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
+        </ul>
+        <div className="seafile-comment-footer">
+          <textarea
+            className="add-comment-input" ref="commentTextarea" placeholder={gettext('Add a comment.')}
+            clos="100" rows="3" warp="virtual"
+          ></textarea>
+          <Button className="submit-comment" color="success" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+DetailCommentList.propTypes = DetailCommentListPropTypes;
+
+const commentItemPropTypes = {
+  time: PropTypes.string.isRequired,
+  item: PropTypes.object.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  resolveComment: PropTypes.func.isRequired,
+  editComment: PropTypes.func.isRequired,
+};
+
+class CommentItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+      html: '',
+      newComment: this.props.item.comment,
+      editable: false,
+    };
+  }
+
+  componentWillMount() {
+    this.convertComment(this.props.item.comment);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.convertComment(nextProps.item.comment);
+  }
+
+  convertComment = (mdFile) => {
+    processor.process(mdFile).then((result) => {
+      let html = String(result);
+      this.setState({ html: html });
+    });
+  }
+
+  toggleDropDownMenu = () => {
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
+  }
+
+  toggleEditComment = () => {
+    this.setState({ editable: !this.state.editable });
+  }
+
+  updateComment = (event) => {
+    const newComment = this.state.newComment;
+    if (this.props.item.comment !== newComment) {
+      this.props.editComment(event.target.id, newComment);
+    }
+    this.toggleEditComment();
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({ newComment: event.target.value });
+  }
+
+  renderInfo = (item) => {
+    return (
+      <Fragment>
+        <img className="avatar" src={item.avatar_url} alt=""/>
+        <div className="reviewer-info">
+          <div className="reviewer-name ellipsis">{item.user_name}</div>
+          <div className="review-time">{this.props.time}</div>
+        </div>
+      </Fragment>
+    );
+  }
+
+  render() {
+    const item = this.props.item;
+    if (this.state.editable) {
+      return(
+        <li className="seafile-comment-item" id={item.id}>
+          <div className="seafile-comment-info">
+            {this.renderInfo(item)}
+          </div>
+          <div className="seafile-edit-comment">
+            <textarea className="edit-comment-input" value={this.state.newComment}
+              onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"
+            ></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancel')}</Button>
+          </div>
+        </li>
+      );
+    }
+    return (
+      <li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved' : 'seafile-comment-item'} id={item.id}>
+        <div className="seafile-comment-info">
+          {this.renderInfo(item)}
+          <Dropdown isOpen={this.state.dropdownOpen} size="sm" className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
+            <DropdownToggle className="seafile-comment-dropdown-btn"><i className="fas fa-ellipsis-v"></i></DropdownToggle>
+            <DropdownMenu>
+              {item.user_email === username &&
+                <DropdownItem onClick={this.props.deleteComment} className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>
+              }
+              {item.user_email === username &&
+                <DropdownItem onClick={this.toggleEditComment} className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
+              }
+              {!item.resolved &&
+                <DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"
+                  id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
+              }
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+        <div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
+      </li>
+    );
+  }
+}
+
+CommentItem.propTypes = commentItemPropTypes;
+
+export default DetailCommentList;

frontend/src/components/dirent-detail/dirent-details.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import DetailCommentList from './detail-comments-list';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
@@ -15,6 +18,7 @@ const propTypes = {
   currentRepoInfo: PropTypes.object.isRequired,
   onItemDetailsClose: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
+  direntDetailPanelTab: PropTypes.string,
 };
 
 class DirentDetail extends React.Component {
@@ -27,9 +31,16 @@ class DirentDetail extends React.Component {
       fileTagList: [],
       relatedFiles: [],
       folderDirent: null,
+      activeTab: 'info',
     };
   }
 
+  componentWillMount() {
+    if (this.props.direntDetailPanelTab) {
+      this.tabItemClick(this.props.direntDetailPanelTab);
+    }
+  }
+
   componentDidMount() {
     let { dirent, path, repoID } = this.props;
     this.loadDirentInfo(dirent, path, repoID);
@@ -38,6 +49,9 @@ class DirentDetail extends React.Component {
   componentWillReceiveProps(nextProps) {
     let { dirent, path, repoID } = nextProps;
     this.loadDirentInfo(dirent, path, repoID);
+    if (this.props.direntDetailPanelTab) {
+      this.tabItemClick(this.props.direntDetailPanelTab);
+    }
   }
 
   loadDirentInfo = (dirent, path, repoID) => {
@@ -109,23 +123,35 @@ class DirentDetail extends React.Component {
     this.updateDetailView(dirent, direntPath);
   }
 
-  render() {
+  tabItemClick = (tab) => {
-    let { dirent } = this.props;
+    if (this.state.activeTab !== tab) {
-    let { folderDirent } = this.state;
+      this.setState({ activeTab: tab });
-    if (!dirent && !folderDirent) {
+    }
-      return '';
   }
 
-    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+  renderNavItem = (showTab) => {
-    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
+    switch(showTab) {
-    const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
+      case 'info':
-    if (isImg) {
+        return (
-      bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
+          <NavItem className="nav-item w-50">
-    }
+            <NavLink className={classnames({ active: this.state.activeTab === 'info' })} onClick={() => { this.tabItemClick('info');}}>
-    let direntName = dirent ? dirent.name : folderDirent.name;
+              <i className="fas fa-info-circle"></i>
-
+            </NavLink>
+          </NavItem>
+        );
+      case 'comments':
+        return (
+          <NavItem className="nav-item w-50">
+            <NavLink className={classnames({ active: this.state.activeTab === 'comments' })} onClick={() => {this.tabItemClick('comments');}}>
+              <i className="fa fa-comments"></i>
+            </NavLink>
+          </NavItem>
+        );
+    }
+  }
+
+  renderHeader = (smallIconUrl, direntName) => {
     return (
-      <div className="detail-container">
       <div className="detail-header">
         <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
         <div className="detail-title dirent-title">
@@ -133,10 +159,14 @@ class DirentDetail extends React.Component {
           <span className="name ellipsis" title={direntName}>{direntName}</span>
         </div>
       </div>
+    );
+  }
+
+  renderDetailBody = (bigIconUrl, folderDirent) => {
+    return (
+      <Fragment>
         <div className="detail-body dirent-info">
-          <div className="img">
+          <div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
-            <img src={bigIconUrl} className="thumbnail" alt="" />
-          </div>
           {this.state.direntDetail && 
             <div className="dirent-table-container">
               <DetailListView 
@@ -154,8 +184,48 @@ class DirentDetail extends React.Component {
             </div>
           }
         </div>
+      </Fragment>
+    );
+  }
+
+  render() {
+    let { dirent } = this.props;
+    let { folderDirent } = this.state;
+    if (!dirent && !folderDirent) {
+      return '';
+    }
+    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
+    const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
+    if (isImg) {
+      bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
+    }
+    let direntName = dirent ? dirent.name : folderDirent.name;
+
+    if (dirent && dirent.type === 'file') {
+      return (
+        <div className="detail-container">
+          {this.renderHeader(smallIconUrl, direntName)}
+          <Nav tabs className="mx-0">{this.renderNavItem('info')}{this.renderNavItem('comments')}</Nav>
+          <TabContent activeTab={this.state.activeTab}>
+            <TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
+            <TabPane tabId="comments" className="comments h-100">
+              <DetailCommentList
+                repoID={this.props.repoID}
+                filePath={this.props.path + dirent.name}
+              />
+            </TabPane>
+          </TabContent>
         </div>
       );
+    } else {
+      return (
+        <div className="detail-container">
+          {this.renderHeader(smallIconUrl, direntName)}
+          {this.renderDetailBody(bigIconUrl, folderDirent)}
+        </div>
+      );
+    }
   }
 }
 

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -48,6 +48,7 @@ const propTypes = {
   getDirentItemMenuList: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
   enableDirPrivateShare: PropTypes.bool.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirentListItem extends React.Component {
@@ -210,7 +211,7 @@ class DirentListItem extends React.Component {
         this.onLockItem();
         break;
       case 'Comment':
-        this.onComnentItem();
+        this.props.showDirentDetail('comments');
         break;
       case 'History':
         this.onHistory();
@@ -288,10 +289,6 @@ class DirentListItem extends React.Component {
     });
   }
 
-  onComnentItem = () => {
-
-  }
-
   onHistory = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -47,6 +47,7 @@ const propTypes = {
   onFileTagChanged: PropTypes.func,
   enableDirPrivateShare: PropTypes.bool.isRequired,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -642,6 +643,7 @@ class DirentListView extends React.Component {
                   activeDirent={this.state.activeDirent}
                   onFileTagChanged={this.props.onFileTagChanged}
                   getDirentItemMenuList={this.getDirentItemMenuList}
+                  showDirentDetail={this.props.showDirentDetail}
                 />
               );
             })}

frontend/src/css/comments-list.css

@@ -104,7 +104,7 @@
 }
 .seafile-comment-footer {
   background-color: #fafaf9;
-  padding: 10px 10px 0;
+  padding: 10px;
   border-top: 1px solid #e5e5e5;
   display: flex;
   flex-direction: column;
@@ -132,3 +132,15 @@
     width: 100%;
   }
 }
+.detail-comments {
+  border-left: 0;
+}
+.detail-comments .seafile-comment-list {
+  margin-top: 0;
+}
+.detail-comments .seafile-comment-footer {
+  min-height: 140px;
+}
+.detail-comments .seafile-comment-footer .add-comment-input, .detail-comments .seafile-edit-comment .edit-comment-input {
+  width: 100%;
+}

frontend/src/css/dirent-detail.css

@@ -169,3 +169,11 @@
 .sf-add-related-file .related-file-subtitle {
   margin-bottom: 4px;
 }
+
+.detail-container .tab-content {
+  height: calc(100% - 73px);
+}
+
+.detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {
+  margin: 0 auto;
+}

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -87,6 +87,7 @@ const propTypes = {
   updateDetail: PropTypes.bool.isRequired,
   onListContainerScroll: PropTypes.func.isRequired,
   onDirentClick: PropTypes.func.isRequired,
+  direntDetailPanelTab: PropTypes.string,
 };
 
 class LibContentContainer extends React.Component {
@@ -223,6 +224,7 @@ class LibContentContainer extends React.Component {
                     onItemsCopy={this.props.onItemsCopy}
                     onItemsDelete={this.props.onItemsDelete}
                     onFileTagChanged={this.props.onFileTagChanged}
+                    showDirentDetail={this.props.showDirentDetail}
                   />
                 )}
                 {this.props.currentMode === 'grid' && (
@@ -335,6 +337,7 @@ class LibContentContainer extends React.Component {
                   currentRepoInfo={this.props.currentRepoInfo}
                   onFileTagChanged={this.props.onFileTagChanged}
                   onItemDetailsClose={this.props.closeDirentDetail}
+                  direntDetailPanelTab={this.props.direntDetailPanelTab}
                 />
               }
             </div>

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -71,6 +71,7 @@ class LibContentView extends React.Component {
       dirID: '',  // for update dir list
       errorMsg: '',
       isDirentDetailShow: false,
+      direntDetailPanelTab: '',
       updateDetail: false,
       itemsShowLength: 100,
       isSessionExpired: false,
@@ -82,16 +83,31 @@ class LibContentView extends React.Component {
     this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
   }
 
-  showDirentDetail = () => {
+  showDirentDetail = (direntDetailPanelTab) => {
-    this.setState({isDirentDetailShow: true});
+    if (direntDetailPanelTab) {
+      this.setState({ direntDetailPanelTab: direntDetailPanelTab }, () => {
+        this.setState({ isDirentDetailShow: true });
+      });
+    } else {
+      this.setState({
+        direntDetailPanelTab: '',
+        isDirentDetailShow: true
+      });
+    }
   }
 
   toggleDirentDetail = () => {
-    this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow });
+    this.setState({
+      direntDetailPanelTab: '',
+      isDirentDetailShow: !this.state.isDirentDetailShow
+    });
   }
 
   closeDirentDetail = () => {
-    this.setState({ isDirentDetailShow: false });
+    this.setState({
+      isDirentDetailShow: false,
+      direntDetailPanelTab: '',
+    });
   }
 
   componentWillMount() {
@@ -581,12 +597,12 @@ class LibContentView extends React.Component {
         }
         this.deleteDirent(direntPath);
       });
-      var msg = gettext("Successfully deleted {name} and other {n} items.");
+      var msg = gettext('Successfully deleted {name} and other {n} items.');
       msg = msg.replace('{name}', dirNames[0]);
       msg = msg.replace('{n}', dirNames.length - 1);
       toaster.success(msg);
     }).catch(() => {
-      var msg = gettext("Failed to delete {name} and other {n} items.");
+      var msg = gettext('Failed to delete {name} and other {n} items.');
       msg = msg.replace('{name}', dirNames[0]);
       msg = msg.replace('{n}', dirNames.length - 1);
       toaster.danger(msg);
@@ -755,22 +771,22 @@ class LibContentView extends React.Component {
       seafileAPI.renameDir(repoID, path, newName).then(() => {
         this.renameItemAjaxCallback(path, newName);
         let name = Utils.getFileName(path);
-        var msg = gettext("Rename {name} successfully").replace('{name}', name);
+        var msg = gettext('Rename {name} successfully').replace('{name}', name);
         toaster.success(msg);
       }).catch(() => {
         let name = Utils.getFileName(path);
-        var msg = gettext("Renaming {name} failed").replace('{name}', name);
+        var msg = gettext('Renaming {name} failed').replace('{name}', name);
         toaster.danger(msg);
       });
     } else {
       seafileAPI.renameFile(repoID, path, newName).then(() => {
         this.renameItemAjaxCallback(path, newName);
         let name = Utils.getFileName(path);
-        var msg = gettext("Rename {name} successfully").replace('{name}', name);
+        var msg = gettext('Rename {name} successfully').replace('{name}', name);
         toaster.success(msg);
       }).catch(() => {
         let name = Utils.getFileName(path);
-        var msg = gettext("Renaming {name} failed").replace('{name}', name);
+        var msg = gettext('Renaming {name} failed').replace('{name}', name);
         toaster.danger(msg);
       });
     }
@@ -789,22 +805,22 @@ class LibContentView extends React.Component {
       seafileAPI.deleteDir(repoID, path).then(() => {
         this.deleteItemAjaxCallback(path, isDir);
         let name = Utils.getFileName(path);
-        var msg = gettext("Successfully deleted {name}").replace('{name}', name);
+        var msg = gettext('Successfully deleted {name}').replace('{name}', name);
         toaster.success(msg);
       }).catch(() => {
         let name = Utils.getFileName(path);
-        var msg = gettext("Failed to delete {name}").replace('{name}', name);
+        var msg = gettext('Failed to delete {name}').replace('{name}', name);
         toaster.danger(msg);
       });
     } else {
       seafileAPI.deleteFile(repoID, path).then(() => {
         this.deleteItemAjaxCallback(path, isDir);
         let name = Utils.getFileName(path);
-        var msg = gettext("Successfully deleted {name}").replace('{name}', name);
+        var msg = gettext('Successfully deleted {name}').replace('{name}', name);
         toaster.success(msg);
       }).catch(() => {
         let name = Utils.getFileName(path);
-        var msg = gettext("Failed to delete {name}").replace('{name}', name);
+        var msg = gettext('Failed to delete {name}').replace('{name}', name);
         toaster.danger(msg);
       });
     }
@@ -1579,6 +1595,7 @@ class LibContentView extends React.Component {
             onItemsDelete={this.onDeleteItems}
             closeDirentDetail={this.closeDirentDetail}
             showDirentDetail={this.showDirentDetail}
+            direntDetailPanelTab={this.state.direntDetailPanelTab}
             onDeleteRepoTag={this.onDeleteRepoTag}
             onToolbarFileTagChanged={this.onToolbarFileTagChanged}
             updateDetail={this.state.updateDetail}

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -177,7 +177,7 @@ class PublicSharedView extends React.Component {
                 <Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
                   <MediaQuery query="(min-width: 768px)">
                     <DropdownToggle className='btn btn-secondary operation-item'>
-                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
+                      <i className="fas fa-plus-square text-secondary"></i>{gettext('Add Library')}
                     </DropdownToggle>
                   </MediaQuery>
                   <MediaQuery query="(max-width: 767.8px)">

seahub/templates/base_for_react.html

@@ -54,7 +54,7 @@
             canGenerateUploadLink: {% if user.permissions.can_generate_upload_link %} true {% else %} false {% endif %},
             canViewOrg:'{{ user.permissions.can_view_org }}',
             fileAuditEnabled: '{{ file_audit_enabled }}',
-            enableFileComment: '{{ enable_file_comment }}',
+            enableFileComment: {% if enableFileComment %} true {% else %} false {% endif %},
             folderPermEnabled: {% if folder_perm_enabled %} true {% else %} false {% endif %},
             enableResetEncryptedRepoPassword: '{{ enable_reset_encrypted_repo_password }}',
             isEmailConfigured: '{{ is_email_configured }}',

seahub/views/__init__.py

@@ -1239,6 +1239,7 @@ def react_fake_view(request, **kwargs):
         'enable_encrypted_library': config.ENABLE_ENCRYPTED_LIBRARY,
         'enable_repo_history_setting': config.ENABLE_REPO_HISTORY_SETTING,
         'enable_reset_encrypted_repo_password': ENABLE_RESET_ENCRYPTED_REPO_PASSWORD,
+        'enableFileComment': settings.ENABLE_FILE_COMMENT,
         'is_email_configured': IS_EMAIL_CONFIGURED,
         'can_add_public_repo': request.user.permissions.can_add_public_repo(),
         'folder_perm_enabled': folder_perm_enabled,