add participants in file comment and detail panel (#3880)

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

@@ -7,6 +7,7 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import ParticipantsList from '../file-view/participants-list';
 import '../../css/comments-list.css';
 
 const { username } = window.app.pageOptions;
@@ -14,6 +15,8 @@ const { username } = window.app.pageOptions;
 const DetailCommentListPropTypes = {
   repoID: PropTypes.string.isRequired,
   filePath: PropTypes.string.isRequired,
+  onParticipantsChange: PropTypes.func.isRequired,
+  fileParticipantList: PropTypes.array.isRequired,
 };
 
 class DetailCommentList extends React.Component {
@@ -93,6 +96,7 @@ class DetailCommentList extends React.Component {
   }
 
   render() {
+    const { repoID, filePath, fileParticipantList } = this.props;
     return (
       <div className="seafile-comment detail-comments h-100 w-100">
         <ul className="seafile-comment-list">
@@ -114,6 +118,15 @@ class DetailCommentList extends React.Component {
             <li className="comment-vacant">{gettext('No comment yet.')}</li>}
         </ul>
         <div className="seafile-comment-footer">
+          {fileParticipantList &&
+            <ParticipantsList
+              onParticipantsChange={this.props.onParticipantsChange}
+              participants={fileParticipantList}
+              repoID={repoID}
+              filePath={filePath}
+              showIconTip={true}
+            />
+          }
           <textarea
             className="add-comment-input" ref="commentTextarea" placeholder={gettext('Add a comment.')}
             clos="100" rows="3" warp="virtual"