Change participants UI and API (#3889)

* change tooltip ID

* change dialog API

* change mention style

* change comment panel API

change detail panel API

* change Tooltip

* change mention color

update seafile-api

change comment content click

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

@@ -8,7 +8,6 @@ import { seafileAPI } from '../../utils/seafile-api';
 import ParticipantsList from './participants-list';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
-import { siteRoot } from '../../utils/constants';
 import { MentionsInput, Mention } from 'react-mentions';
 import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
 import '../../css/comments-list.css';
@@ -33,6 +32,7 @@ class CommentPanel extends React.Component {
       relatedUsers: null,
       comment: '',
     };
+    this.toBeAddedParticipant = [];
   }
 
   toggleResolvedComment = () => {
@@ -53,7 +53,7 @@ class CommentPanel extends React.Component {
   listRepoRelatedUsers = () => {
     seafileAPI.listRepoRelatedUsers(repoID).then((res) => {
       let users = res.data.user_list.map((item) => {
-        return { id: (siteRoot + 'profile/' + item.email), display: item.name};
+        return { id: item.email, display: item.name};
       });
       this.setState({ relatedUsers: users });
     });
@@ -63,18 +63,29 @@ class CommentPanel extends React.Component {
     this.setState({ comment: event.target.value });
   }
 
-  submitComment = () => {
-    let comment = this.state.comment;
-    if (comment.trim()) {
-      seafileAPI.postComment(repoID, filePath, comment).then(() => {
-        this.listComments();
-      }).catch(error => {
-        let errMessage = Utils.getErrorMsg(error);
-        toaster.danger(errMessage);
-      });
-      this.addParticipant(username);
-    }
+  addComment = () => {
+    if (!this.state.comment.trim()) return;
+    seafileAPI.postComment(repoID, filePath, this.state.comment.trim()).then(() => {
+      this.listComments();
+    }).catch(err => {
+      toaster.danger(Utils.getErrorMsg(err));
+    });
     this.setState({ comment: '' });
+  } 
+
+  onSubmit = () => {
+    this.addParticipant(username);
+    if (this.toBeAddedParticipant.length === 0) {
+      this.addComment();
+    } else {
+      seafileAPI.addFileParticipants(repoID, filePath, this.toBeAddedParticipant).then((res) => {
+        this.onParticipantsChange(repoID, filePath);
+        this.toBeAddedParticipant = [];
+        this.addComment();
+      }).catch((err) => {
+        toaster.danger(Utils.getErrorMsg(err));
+      });
+    }
   }
 
   resolveComment = (event) => {
@@ -128,23 +139,13 @@ class CommentPanel extends React.Component {
 
   addParticipant = (email) => {
     if (this.checkParticipant(email)) return;
-    seafileAPI.addFileParticipant(repoID, filePath, email).then((res) => {
-      this.onParticipantsChange(repoID, filePath);
-    }).catch((err) => {
-      let errMessage = Utils.getErrorMsg(err);
-      toaster.danger(errMessage);
-    });
+    this.toBeAddedParticipant.push(email);
   }
 
   renderUserSuggestion = (entry, search, highlightedDisplay, index, focused) => {
     return <div className={`user ${focused ? 'focused' : ''}`}>{highlightedDisplay}</div>;
   }
 
-  handleMention = (id, display) => {
-    const email = id.slice(id.lastIndexOf('/') + 1);
-    this.addParticipant(email);
-  }
-
   componentDidMount() {
     this.listComments();
     this.getParticipants();
@@ -221,15 +222,14 @@ class CommentPanel extends React.Component {
           >
             <Mention
               trigger="@"
+              displayTransform={(username, display) => `@${display}`}
               data={this.state.relatedUsers}
               renderSuggestion={this.renderUserSuggestion}
               style={defaultMentionStyle}
-              onAdd={this.handleMention}
+              onAdd={(id, display) => {this.addParticipant(id);}}
             />
           </MentionsInput>
-          <Button
-            className="submit-comment" color="primary"
-            size="sm" onClick={this.submitComment} >
+          <Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
             {gettext('Submit')}</Button>
         </div>
       </div>
@@ -268,14 +268,10 @@ class CommentItem extends React.Component {
   }
 
   convertComment = (mdFile) => {
-    processor.process(mdFile).then(
-      (result) => {
-        let html = String(result);
-        this.setState({
-          html: html
-        });
-      }
-    );
+    processor.process(mdFile).then((result) => {
+      let html = String(result);
+      this.setState({ html: html });
+    });
   }
 
   toggleEditComment = () => {
@@ -298,6 +294,15 @@ class CommentItem extends React.Component {
     });
   }
 
+  onCommentClick = (e) => {
+    // click participant link, page shouldn't jump
+    if (e.target.nodeName !== 'A') return;
+    const preNode = e.target.previousSibling;
+    if (preNode && preNode.nodeType === 3 && preNode.nodeValue.slice(-1) === '@') {
+      e.preventDefault();
+    }
+  }
+
   componentWillMount() {
     this.convertComment(this.props.item.comment);
   }
@@ -324,7 +329,7 @@ class CommentItem extends React.Component {
           <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>
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>{gettext('Cancel')}</Button>
           </div>
         </li>
       );
@@ -344,24 +349,25 @@ class CommentItem extends React.Component {
               <i className="fas fa-ellipsis-v"></i>
             </DropdownToggle>
             <DropdownMenu>
-              {
-                (item.user_email === username) &&
+              {(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.user_email === username) &&
+                <DropdownItem onClick={this.toggleEditComment}
+                  className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
               }
-              {
-                !item.resolved &&
+              {!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>
+        <div
+          className="seafile-comment-content"
+          dangerouslySetInnerHTML={{ __html: this.state.html }}
+          onClick={e => this.onCommentClick(e)}
+        ></div>
       </li>
     );
   }