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

frontend/src/components/dialog/file-participant-dialog.js

@@ -33,7 +33,7 @@ class FileParticipantListItem extends Component {
     const { participant } = this.props;
     return (
       <div className="participant-select-info" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-        <div className="d-flex">
+        <div className="d-flex" style={{maxWidth: '90%'}}>
           <img className="avatar participant-select-avatar" src={participant.avatar_url} alt=""/>
           <span className="participant-select-name ellipsis">{participant.name}</span>
         </div>

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"

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

@@ -239,6 +239,8 @@ class DirentDetail extends React.Component {
               <DetailCommentList
                 repoID={this.props.repoID}
                 filePath={(dirent && dirent.type === 'file') ? Utils.joinPath(path, dirent.name) : path}
+                fileParticipantList={this.state.fileParticipantList}
+                onParticipantsChange={this.onParticipantsChange}
               />
             </TabPane>
           </TabContent>

frontend/src/components/file-view/comment-panel.js

@@ -26,6 +26,7 @@ class CommentPanel extends React.Component {
     this.state = {
       commentsList: [],
       showResolvedComment: true,
+      participants: null,
     };
   }
 
@@ -92,8 +93,27 @@ class CommentPanel extends React.Component {
     });
   }
 
+  onParticipantsChange = () => {
+    if (this.props.onParticipantsChange) {
+      this.props.onParticipantsChange();
+    } else {
+      this.getParticipants();
+    }
+  }
+
+  getParticipants = () => {
+    if (this.props.participants) {
+      this.setState({ participants: this.props.participants });
+    } else {
+      seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
+        this.setState({ participants: res.data.participant_list });
+      });
+    }
+  }
+
   componentDidMount() {
     this.listComments();
+    this.getParticipants();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -103,7 +123,7 @@ class CommentPanel extends React.Component {
   }
 
   render() {
-    const { participants } = this.props;
+    const { participants } = this.state;
     return (
       <div className="seafile-comment">
         <div className="seafile-comment-title">
@@ -148,7 +168,7 @@ class CommentPanel extends React.Component {
         <div className="seafile-comment-footer">
           {participants &&
             <ParticipantsList
-              onParticipantsChange={this.props.onParticipantsChange}
+              onParticipantsChange={this.onParticipantsChange}
               participants={participants}
               repoID={repoID}
               filePath={filePath}

frontend/src/css/comments-list.css

@@ -139,7 +139,7 @@
   margin-top: 0;
 }
 .detail-comments .seafile-comment-footer {
-  min-height: 140px;
+  min-height: 175px;
 }
 .detail-comments .seafile-comment-footer .add-comment-input, .detail-comments .seafile-edit-comment .edit-comment-input {
   width: 100%;