haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 02:48:51 +00:00
Code Issues Releases Wiki Activity

remove comment (#5650)

Browse Source 
* remove comment

* remove useless third party lib

* remove comment
This commit is contained in:
Michael An
2023-09-18 18:15:54 +08:00
committed by GitHub
parent f7754fa2e1
commit 2a6aa4b4d4
31 changed files with 34 additions and 2570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/common/notice-item.js
View File

@@ -15,8 +15,6 @@ const MSG_TYPE_REPO_SHARE = 'repo_share';
const MSG_TYPE_REPO_SHARE_TO_GROUP = 'repo_share_to_group';
const MSG_TYPE_REPO_TRANSFER = 'repo_transfer';
const MSG_TYPE_FILE_UPLOADED = 'file_uploaded';
const MSG_TYPE_FILE_COMMENT = 'file_comment';
const MSG_TYPE_DRAFT_COMMENT = 'draft_comment';
const MSG_TYPE_DRAFT_REVIEWER = 'draft_reviewer';
// const MSG_TYPE_GUEST_INVITATION_ACCEPTED = 'guest_invitation_accepted';
const MSG_TYPE_REPO_MONITOR = 'repo_monitor';
@@ -171,45 +169,6 @@ class NoticeItem extends React.Component {
return {avatar_url, notice};
}
if (noticeType === MSG_TYPE_FILE_COMMENT) {
let avatar_url = detail.author_avatar_url;
let author = detail.author_name;
let fileName = detail.file_name;
let fileUrl = siteRoot + 'lib/' + detail.repo_id + '/' + 'file' + detail.file_path;
// 1. handle translate
let notice = gettext('File {file_link} has a new comment form user {author}.');
// 2. handle xss(cross-site scripting)
notice = notice.replace('{file_link}', `{tagA}${fileName}{/tagA}`);
notice = notice.replace('{author}', author);
notice = Utils.HTMLescape(notice);
// 3. add jump link
notice = notice.replace('{tagA}', `<a href=${Utils.encodePath(fileUrl)}>`);
notice = notice.replace('{/tagA}', '</a>');
return {avatar_url, notice};
}
if (noticeType === MSG_TYPE_DRAFT_COMMENT) {
let avatar_url = detail.author_avatar_url;
let author = detail.author_name;
let draftId = detail.draft_id;
let draftUrl = siteRoot + 'drafts/' + draftId + '/';
let notice = gettext('{draft_link} has a new comment from user {author}.');
let draftLink = '<a href=' + draftUrl + '>' + gettext('Draft') + '#' + draftId + '</a>';
notice = notice.replace('{draft_link}', draftLink);
notice = notice.replace('{author}', author);
return {avatar_url, notice};
}
if (noticeType === MSG_TYPE_DRAFT_REVIEWER) {
let avatar_url = detail.request_user_avatat_url;

318
frontend/src/components/dirent-detail/detail-comments-list.js
View File

@@ -1,318 +0,0 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { processor } from '@seafile/seafile-editor';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { gettext, username } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import { MentionsInput, Mention } from 'react-mentions';
import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
import '../../css/comments-list.css';
const DetailCommentListPropTypes = {
repoID: PropTypes.string.isRequired,
filePath: PropTypes.string.isRequired,
onParticipantsChange: PropTypes.func.isRequired,
fileParticipantList: PropTypes.array.isRequired,
};
class DetailCommentList extends React.Component {
constructor(props) {
super(props);
this.state = {
commentsList: [],
relatedUsers: null,
comment: '',
};
this.toBeAddedParticipant = [];
}
componentDidMount() {
this.listComments();
this.checkParticipant();
this.listRepoRelatedUsers();
}
componentWillReceiveProps(nextProps) {
if (nextProps.filePath !== this.props.filePath) {
this.listComments(nextProps.filePath);
}
}
handleCommentChange = (event) => {
this.setState({ comment: event.target.value });
};
listComments = (filePath) => {
seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
this.setState({ commentsList: res.data.comments });
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
addComment = () => {
const { repoID, filePath } = this.props;
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 {
const { repoID, filePath } = this.props;
seafileAPI.addFileParticipants(repoID, filePath, this.toBeAddedParticipant).then((res) => {
this.props.onParticipantsChange(repoID, filePath);
this.toBeAddedParticipant = [];
this.addComment();
}).catch((err) => {
toaster.danger(Utils.getErrorMsg(err));
});
}
};
resolveComment = (event) => {
const { repoID } = this.props;
seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
deleteComment = (event) => {
const { repoID } = this.props;
seafileAPI.deleteComment(repoID, event.target.id).then(() => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
editComment = (commentID, newComment) => {
const { repoID } = this.props;
seafileAPI.updateComment(repoID, commentID, null, null, newComment).then(() => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
listRepoRelatedUsers = () => {
const { repoID } = this.props;
seafileAPI.listRepoRelatedUsers(repoID).then((res) => {
let users = res.data.user_list.map((item) => {
return { id: item.email, display: item.name};
});
this.setState({ relatedUsers: users });
});
};
checkParticipant = (email) => {
return this.props.fileParticipantList.map((participant) => {return participant.email;}).includes(email);
};
addParticipant = (email) => {
if (this.checkParticipant(email)) return;
this.toBeAddedParticipant.push(email);
};
renderUserSuggestion = (entry, search, highlightedDisplay, index, focused) => {
return <div className={`user ${focused ? 'focused' : ''}`}>{highlightedDisplay}</div>;
};
render() {
const { commentsList } = this.state;
return (
<div className="seafile-comment detail-comments h-100">
<div className="flex-fill o-auto">
{commentsList.length > 0 ? (
<ul className="seafile-comment-list">
{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 (
<CommentItem
key={item.id}
item={item}
time={time}
deleteComment={this.deleteComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
/>
);
})
}
</ul>) :
<p className="text-center my-4">{gettext('No comment yet.')}</p>
}
</div>
<div className="seafile-comment-footer flex-shrink-0">
<MentionsInput
value={this.state.comment}
onChange={this.handleCommentChange}
placeholder={gettext('Add a comment...')}
style={defaultStyle}
>
<Mention
trigger="@"
displayTransform={(username, display) => `@${display}`}
data={this.state.relatedUsers}
renderSuggestion={this.renderUserSuggestion}
style={defaultMentionStyle}
onAdd={(id, display) => {this.addParticipant(id);}}
appendSpaceOnAdd={true}
/>
</MentionsInput>
<div className="comment-submit-container">
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
</div>
</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 });
};
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();
}
};
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="primary" 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 }}
onClick={e => this.onCommentClick(e)}
></div>
</li>
);
}
}
CommentItem.propTypes = commentItemPropTypes;
export default DetailCommentList;

102
frontend/src/components/dirent-detail/dirent-details.js
View File

@@ -1,8 +1,5 @@
import React, { Fragment } from 'react';
import React 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 { siteRoot, enableVideoThumbnail } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
@@ -31,7 +28,6 @@ class DirentDetail extends React.Component {
direntType: '',
direntDetail: '',
folderDirent: null,
activeTab: 'info',
fileParticipantList: [],
};
}
@@ -118,33 +114,6 @@ class DirentDetail extends React.Component {
this.listParticipants(repoID, filePath);
};
tabItemClick = (tab) => {
if (this.state.activeTab !== tab) {
this.setState({ activeTab: tab });
}
};
renderNavItem = (showTab) => {
switch(showTab) {
case 'info':
return (
<NavItem className="nav-item w-50">
<NavLink className={classnames({ active: this.state.activeTab === 'info' })} onClick={() => { this.tabItemClick('info');}}>
<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-header">
@@ -160,25 +129,23 @@ class DirentDetail extends React.Component {
renderDetailBody = (bigIconUrl, folderDirent) => {
const { dirent, fileTags } = this.props;
return (
<Fragment>
<div className="detail-body dirent-info">
<div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
{this.state.direntDetail &&
<div className="dirent-table-container">
<DetailListView
repoInfo={this.props.currentRepoInfo}
path={this.props.path}
repoID={this.props.repoID}
dirent={this.props.dirent || folderDirent}
direntType={this.state.direntType}
direntDetail={this.state.direntDetail}
fileTagList={dirent ? dirent.file_tags : fileTags}
onFileTagChanged={this.props.onFileTagChanged}
/>
</div>
}
</div>
</Fragment>
<div className="detail-body dirent-info">
<div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
{this.state.direntDetail &&
<div className="dirent-table-container">
<DetailListView
repoInfo={this.props.currentRepoInfo}
path={this.props.path}
repoID={this.props.repoID}
dirent={this.props.dirent || folderDirent}
direntType={this.state.direntType}
direntDetail={this.state.direntDetail}
fileTagList={dirent ? dirent.file_tags : fileTags}
onFileTagChanged={this.props.onFileTagChanged}
/>
</div>
}
</div>
);
};
@@ -196,33 +163,12 @@ class DirentDetail extends React.Component {
bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
}
let direntName = dirent ? dirent.name : folderDirent.name;
if ((dirent && dirent.type === 'file') || path.lastIndexOf('.') > -1) {
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} className="flex-fill o-auto">
<TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
<TabPane tabId="comments" className="comments h-100">
<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>
</div>
);
} else {
return (
<div className="detail-container">
{this.renderHeader(smallIconUrl, direntName)}
{this.renderDetailBody(bigIconUrl, folderDirent)}
</div>
);
}
return (
<div className="detail-container">
{this.renderHeader(smallIconUrl, direntName)}
{this.renderDetailBody(bigIconUrl, folderDirent)}
</div>
);
}
}

7
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -166,9 +166,6 @@ class DirentGridView extends React.Component {
case 'Unmark as draft':
this.onUnmarkAsDraft(currentObject);
break;
case 'Comment':
this.onCommentItem();
break;
case 'History':
this.onHistory(currentObject);
break;
@@ -303,10 +300,6 @@ class DirentGridView extends React.Component {
});
};
onCommentItem = () => {
this.props.showDirentDetail('comments');
};
onHistory = (currentObject) => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(currentObject);

4
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -281,10 +281,6 @@ class DirentListItem extends React.Component {
case 'Unmark as draft':
this.onUnmarkAsDraft();
break;
case 'Comment':
this.props.onDirentClick(this.props.dirent);
this.props.showDirentDetail('comments');
break;
case 'History':
this.onHistory();
break;

355
frontend/src/components/file-view/comment-panel.js
View File

@@ -1,355 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { processor } from '@seafile/seafile-editor';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import { MentionsInput, Mention } from 'react-mentions';
import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
import '../../css/comments-list.css';
const { username, repoID, filePath } = window.app.pageOptions;
const CommentPanelPropTypes = {
toggleCommentPanel: PropTypes.func.isRequired,
commentsNumber: PropTypes.number,
participants: PropTypes.array,
onParticipantsChange: PropTypes.func,
};
class CommentPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
commentsList: [],
showResolvedComment: true,
participants: null,
relatedUsers: null,
comment: '',
};
this.toBeAddedParticipant = [];
}
listComments = () => {
seafileAPI.listComments(repoID, filePath).then((res) => {
this.setState({
commentsList: res.data.comments
});
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
listRepoRelatedUsers = () => {
seafileAPI.listRepoRelatedUsers(repoID).then((res) => {
let users = res.data.user_list.map((item) => {
return { id: item.email, display: item.name};
});
this.setState({ relatedUsers: users });
});
};
handleCommentChange = (event) => {
this.setState({ comment: event.target.value });
};
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) => {
seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
deleteComment = (event) => {
seafileAPI.deleteComment(repoID, event.target.id).then(() => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
editComment = (commentID, newComment) => {
seafileAPI.updateComment(repoID, commentID, null, null, newComment).then((res) => {
this.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
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 });
});
}
};
checkParticipant = (email) => {
return this.state.participants.map((participant) => {return participant.email;}).includes(email);
};
addParticipant = (email) => {
if (this.checkParticipant(email)) return;
this.toBeAddedParticipant.push(email);
};
renderUserSuggestion = (entry, search, highlightedDisplay, index, focused) => {
return <div className={`user ${focused ? 'focused' : ''}`}>{highlightedDisplay}</div>;
};
componentDidMount() {
this.listComments();
this.getParticipants();
this.listRepoRelatedUsers();
}
componentWillReceiveProps(nextProps) {
if (this.props.commentsNumber !== nextProps.commentsNumber) {
this.listComments();
}
if (this.props.participants !== nextProps.participants) {
this.setState({ participants: nextProps.participants });
}
}
render() {
const { commentsList } = this.state;
return (
<div className="seafile-comment">
<div className="seafile-comment-title flex-shrink-0">
<div onClick={this.props.toggleCommentPanel} className="seafile-comment-title-close">
<i className="fa fa-times-circle"></i>
</div>
<div className="seafile-comment-title-text">{gettext('Comments')}</div>
</div>
<div className="flex-fill o-auto">
{commentsList.length > 0 ? (
<ul className="seafile-comment-list">
{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 (
<CommentItem
key={item.id}
item={item} time={time}
deleteComment={this.deleteComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
showResolvedComment={this.state.showResolvedComment}
/>
);
})}
</ul>) :
<p className="text-center my-4">{gettext('No comment yet.')}</p>
}
</div>
<div className="seafile-comment-footer flex-shrink-0">
<MentionsInput
value={this.state.comment}
onChange={this.handleCommentChange}
placeholder={gettext('Add a comment...')}
style={defaultStyle}
>
<Mention
trigger="@"
displayTransform={(username, display) => `@${display}`}
data={this.state.relatedUsers}
renderSuggestion={this.renderUserSuggestion}
style={defaultMentionStyle}
onAdd={(id, display) => {this.addParticipant(id);}}
appendSpaceOnAdd={true}
/>
</MentionsInput>
<div className="comment-submit-container">
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
</div>
</div>
</div>
);
}
}
CommentPanel.propTypes = CommentPanelPropTypes;
const commentItemPropTypes = {
time: PropTypes.string.isRequired,
item: PropTypes.object.isRequired,
deleteComment: PropTypes.func.isRequired,
resolveComment: PropTypes.func.isRequired,
showResolvedComment: PropTypes.bool.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,
};
}
toggleDropDownMenu = () => {
this.setState({
dropdownOpen: !this.state.dropdownOpen,
});
};
convertComment = (mdFile) => {
processor.process(mdFile).then((result) => {
let html = String(result);
this.setState({ html: html });
});
};
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,
});
};
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);
}
componentWillReceiveProps(nextProps) {
this.convertComment(nextProps.item.comment);
}
render() {
const item = this.props.item;
if (item.resolved && !this.props.showResolvedComment) {
return null;
}
if (this.state.editable) {
return(
<li className="seafile-comment-item" id={item.id}>
<div className="seafile-comment-info">
<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>
</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="primary" 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">
<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>
<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 }}
onClick={e => this.onCommentClick(e)}
></div>
</li>
);
}
}
CommentItem.propTypes = commentItemPropTypes;
export default CommentPanel;

15
frontend/src/components/file-view/file-toolbar.js
View File

@@ -16,7 +16,6 @@ const propTypes = {
isSaving: PropTypes.bool,
needSave: PropTypes.bool,
toggleLockFile: PropTypes.func.isRequired,
toggleCommentPanel: PropTypes.func.isRequired,
toggleDetailsPanel: PropTypes.func.isRequired
};
@@ -27,7 +26,7 @@ const {
fileName,
canEditFile, err,
// fileEnc, // for 'edit', not undefined only for some kinds of files (e.g. text file)
canDownloadFile, enableComment
canDownloadFile,
} = window.app.pageOptions;
class FileToolbar extends React.Component {
@@ -106,12 +105,10 @@ class FileToolbar extends React.Component {
showShareBtn = true;
}
let canComment = enableComment;
const { isCustomPermission, customPermission } = this;
if (isCustomPermission) {
const { download_external_link } = customPermission.permission;
showShareBtn = download_external_link;
canComment = false;
}
return (
@@ -196,11 +193,6 @@ class FileToolbar extends React.Component {
<span className="fas fa-ellipsis-v"></span>
</DropdownToggle>
<DropdownMenu right={true}>
{canComment && (
<DropdownItem onClick={this.props.toggleCommentPanel}>
{gettext('Comment')}
</DropdownItem>
)}
{filePerm == 'rw' && (
<a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item">
{gettext('History')}
@@ -264,11 +256,6 @@ class FileToolbar extends React.Component {
</a>
</DropdownItem>
)}
{canComment && (
<DropdownItem onClick={this.props.toggleCommentPanel}>
{gettext('Comment')}
</DropdownItem>
)}
<DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
</DropdownMenu>
</Dropdown>

16
frontend/src/components/file-view/file-view.js
View File

@@ -7,7 +7,6 @@ import { Utils } from '../../utils/utils';
import toaster from '../toast';
import FileInfo from './file-info';
import FileToolbar from './file-toolbar';
import CommentPanel from './comment-panel';
import FileDetails from '../dirent-detail/file-details';
import '../../css/file-view.css';
@@ -35,7 +34,6 @@ class FileView extends React.Component {
isStarred: isStarred,
isLocked: isLocked,
lockedByMe: lockedByMe,
isCommentPanelOpen: false,
isDetailsPanelOpen: false
};
}
@@ -44,12 +42,6 @@ class FileView extends React.Component {
this.setState({isDetailsPanelOpen: !this.state.isDetailsPanelOpen});
};
toggleCommentPanel = () => {
this.setState({
isCommentPanelOpen: !this.state.isCommentPanelOpen
});
};
toggleStar = () => {
if (this.state.isStarred) {
seafileAPI.unstarItem(repoID, filePath).then((res) => {
@@ -113,19 +105,11 @@ class FileView extends React.Component {
isSaving={this.props.isSaving}
needSave={this.props.needSave}
toggleLockFile={this.toggleLockFile}
toggleCommentPanel={this.toggleCommentPanel}
toggleDetailsPanel={this.toggleDetailsPanel}
/>
</div>
<div className="file-view-body flex-auto d-flex o-hidden">
{this.props.content}
{this.state.isCommentPanelOpen &&
<CommentPanel
toggleCommentPanel={this.toggleCommentPanel}
participants={this.props.participants}
onParticipantsChange={this.props.onParticipantsChange}
/>
}
{isDetailsPanelOpen &&
<FileDetails
repoID={repoID}

88
frontend/src/components/markdown-view/comment-dialog.js
View File

@@ -1,88 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import { processor } from '@seafile/seafile-editor';
import { gettext } from '../../utils/constants';
import '../../css/markdown-viewer/comment-dialog.css';
const propTypes = {
editorApi: PropTypes.object.isRequired,
quote: PropTypes.string.isRequired,
commentPosition: PropTypes.object.isRequired,
onCommentAdded: PropTypes.func.isRequired,
toggleCommentDialog: PropTypes.func.isRequired,
};
class CommentDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
comment: '',
quote: '',
};
}
handleCommentChange = (event) => {
let comment = event.target.value;
this.setState({
comment: comment
});
};
submitComment = () => {
let comment = this.state.comment.trim();
if (comment.length > 0 && this.props.quote.length > 0) {
let detail = {
quote: this.props.quote,
position: this.props.commentPosition,
};
let detailJSON = JSON.stringify(detail);
this.props.editorApi.postComment(comment, detailJSON).then((res) => {
this.props.onCommentAdded();
});
}
};
setQuoteText = (mdQuote) => {
processor.process(mdQuote).then(
(result) => {
let quote = String(result);
this.setState({
quote: quote
});
}
);
};
componentDidMount() {
this.setQuoteText(this.props.quote);
}
componentWillReceiveProps(nextProps) {
if (this.props.quote !== nextProps.quote) {
this.setQuoteText(nextProps.quote);
}
}
render() {
return (
<div className="comment-dialog">
<div>{this.props.editorApi.name}</div>
<blockquote className="comment-dialog-quote">
<div dangerouslySetInnerHTML={{ __html: this.state.quote}}></div>
</blockquote>
<textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
<div className="button-group">
<Button size="sm" color="primary" onClick={this.submitComment}>{gettext('Submit')}</Button>
<Button size="sm" color="secondary" onClick={this.props.toggleCommentDialog}>{gettext('Cancel')}</Button>
</div>
<span className="comment-dialog-triangle"></span>
</div>
);
}
}
CommentDialog.propTypes = propTypes;
export default CommentDialog;

101
frontend/src/components/review-list-view/review-comment-dialog.js
View File

@@ -1,101 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, name, draftRepoID, draftFilePath } from '../../utils/constants';
import { processor } from '../../utils/seafile-markdown2html';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import '../../css/review-comment-dialog.css';
const commentDialogPropTypes = {
onCommentAdded: PropTypes.func.isRequired,
toggleCommentDialog: PropTypes.func.isRequired,
quote: PropTypes.string,
newIndex: PropTypes.number,
oldIndex: PropTypes.number,
};
class ReviewCommentDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
comment: '',
quote: '',
};
}
handleCommentChange = (event) => {
let comment = event.target.value;
this.setState({ comment: comment });
};
submitComment = () => {
const { quote, newIndex, oldIndex } = this.props;
const comment = this.state.comment.trim();
if (comment.length === 0) return;
if (quote.length > 0) {
let detail = {
quote: quote,
newIndex: newIndex,
oldIndex: oldIndex
};
seafileAPI.postComment(draftRepoID, draftFilePath, comment, JSON.stringify(detail)).then(() => {
this.props.onCommentAdded();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
} else {
seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
this.props.onCommentAdded();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
}
this.setState({ comment: '' });
};
setQuoteText = (mdQuote) => {
processor.process(mdQuote).then(
(result) => {
let quote = String(result);
this.setState({ quote: quote });
}
);
};
componentDidMount() {
this.setQuoteText(this.props.quote);
}
componentWillReceiveProps(nextProps) {
if (this.props.quote !== nextProps.quote) {
this.setQuoteText(nextProps.quote);
}
}
render() {
return (
<div className="review-comment-dialog">
<div>{name}</div>
<blockquote className="review-comment-dialog-quote">
<div dangerouslySetInnerHTML={{ __html: this.state.quote}}></div>
</blockquote>
<textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
<div className="button-group">
<Button size="sm" color="primary" onClick={this.submitComment}>{gettext('Submit')}</Button>
<Button size="sm" color="secondary" onClick={this.props.toggleCommentDialog}>{gettext('Cancel')}</Button>
</div>
<span className="review-comment-dialog-triangle"></span>
</div>
);
}
}
ReviewCommentDialog.propTypes = commentDialogPropTypes;
export default ReviewCommentDialog;

266
frontend/src/components/review-list-view/review-comments.js
View File

@@ -1,266 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { processor } from '../../utils/seafile-markdown2html';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, draftFilePath, draftRepoID } from '../../utils/constants';
import { username } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import '../../css/comments-list.css';
const commentPropTypes = {
listComments: PropTypes.func.isRequired,
commentsList: PropTypes.array.isRequired,
scrollToQuote: PropTypes.func.isRequired
};
class ReviewComments extends React.Component {
constructor(props) {
super(props);
this.state = {
showResolvedComment: true,
comment: '',
};
}
handleCommentChange = (event) => {
this.setState({ comment: event.target.value });
};
submitComment = () => {
let comment = this.state.comment.trim();
if (comment.length > 0) {
seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
this.props.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
this.setState({ comment: '' });
}
};
resolveComment = (event) => {
seafileAPI.updateComment(draftRepoID, event.target.id, 'true').then((res) => {
this.props.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
editComment = (commentID, newComment) => {
seafileAPI.updateComment(draftRepoID, commentID, null, null, newComment).then((res) => {
this.props.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
deleteComment = (event) => {
seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
this.props.listComments();
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
scrollToQuote = (newIndex, oldIndex, quote) => {
this.props.scrollToQuote(newIndex, oldIndex, quote);
this.setState({ comment: '' });
};
componentWillReceiveProps(nextProps) {
if (this.props.commentsList.length < nextProps.commentsList.length) {
let that = this;
setTimeout(() => {
that.refs.commentsList.scrollTo(0, 10000);
}, 100);
}
}
render() {
const { commentsList } = this.props;
return (
<div className="seafile-comment h-100">
<div className="flex-fill o-auto">
{commentsList.length > 0 ? (
<ul className="seafile-comment-list" ref='commentsList'>
{commentsList.map((item, index) => {
return (
<CommentItem
item={item}
key={index}
showResolvedComment={this.state.showResolvedComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
scrollToQuote={this.scrollToQuote}
deleteComment={this.deleteComment}
/>
);
})}
</ul>
) :
<p className="text-center my-4">{gettext('No comment yet.')}</p>
}
</div>
<div className="seafile-comment-footer flex-shrink-0">
<textarea
className="add-comment-input"
value={this.state.comment}
placeholder={gettext('Add a comment...')}
onChange={this.handleCommentChange}
clos="100" rows="3" warp="virtual"
></textarea>
<div className="comment-submit-container">
<Button className="submit-comment" color="primary" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
</div>
</div>
</div>
);
}
}
ReviewComments.propTypes = commentPropTypes;
const commentItemPropTypes = {
item: PropTypes.object.isRequired,
deleteComment: PropTypes.func.isRequired,
resolveComment: PropTypes.func.isRequired,
editComment: PropTypes.func.isRequired,
showResolvedComment: PropTypes.bool.isRequired,
scrollToQuote: PropTypes.func.isRequired
};
class CommentItem extends React.Component {
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
comment: '',
quote: '',
newComment: this.props.item.comment,
editable: false,
};
}
toggleDropDownMenu = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
};
convertComment = (item) => {
processor.process(item.comment).then((result) => {
let comment = String(result);
this.setState({ comment: comment });
});
processor.process(item.quote).then((result) => {
let quote = String(result);
this.setState({ quote: quote });
});
};
scrollToQuote = () => {
const item = this.props.item;
this.props.scrollToQuote(item.newIndex, item.oldIndex, item.quote);
};
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 });
};
componentWillMount() {
this.convertComment(this.props.item);
}
componentWillReceiveProps(nextProps) {
this.convertComment(nextProps.item);
}
render() {
const item = this.props.item;
if (item.resolved && !this.props.showResolvedComment) return null;
if (this.state.editable) {
return(
<li className="seafile-comment-item" id={item.id}>
<div className="seafile-comment-info">
<img className="avatar" src={item.avatarUrl} alt=""/>
<div className="reviewer-info">
<div className="reviewer-name ellipsis">{item.name}</div>
<div className="review-time">{item.time}</div>
</div>
</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="primary" 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">
<img className="avatar" src={item.avatarUrl} alt=""/>
<div className="reviewer-info">
<div className="reviewer-name ellipsis">{item.name}</div>
<div className="review-time">{item.time}</div>
</div>
{!item.resolved &&
<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.userEmail === username) &&
<DropdownItem onClick={this.props.deleteComment}
className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>}
{(item.userEmail === username) &&
<DropdownItem onClick={this.toggleEditComment}
className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>}
<DropdownItem onClick={this.props.resolveComment}
className="seafile-comment-resolved" id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
</DropdownMenu>
</Dropdown>
}
</div>
{(item.newIndex >= -1 && item.oldIndex >= -1) &&
<blockquote className="seafile-comment-content">
<div onClick={this.scrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div>
</blockquote>
}
<div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.comment }}></div>
</li>
);
}
}
CommentItem.propTypes = commentItemPropTypes;
export default ReviewComments;

7
frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
View File

@@ -159,10 +159,6 @@ class MultipleDirOperationToolbar extends React.Component {
});
};
onCommentItem = () => {
this.props.showDirentDetail('comments');
};
getDirentMenuList = (dirent) => {
const isRepoOwner = this.props.isRepoOwner;
const currentRepoInfo = this.props.currentRepoInfo;
@@ -215,9 +211,6 @@ class MultipleDirOperationToolbar extends React.Component {
case 'Unmark as draft':
this.onUnmarkAsDraft(dirent);
break;
case 'Comment':
this.onCommentItem();
break;
case 'History':
this.onHistory(dirent);
break;