[dir view, file view] removed 'participant list' & 'add participant' for 'info panel' & 'comment panel' (#5515)

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

@@ -1,145 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import UserSelect from '../user-select';
-import toaster from '../toast';
-import { Utils } from '../../utils/utils';
-import '../../css/participants-list.css';
-
-const fileParticipantListItemPropTypes = {
-  participant: PropTypes.object.isRequired,
-  deleteFileParticipant: PropTypes.func.isRequired,
-};
-
-class FileParticipantListItem extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOperationShow: false,
-    };
-  }
-
-  onMouseOver = () => {
-    this.setState({ isOperationShow: true });
-  };
-
-  onMouseLeave = () => {
-    this.setState({ isOperationShow: false });
-  };
-
-  render() {
-    const { participant } = this.props;
-    return (
-      <div className="participant-select-info" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-        <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>
-        <i
-          className={`action-icon sf2-icon-x3 ${!this.state.isOperationShow &&'o-hidden'}`}
-          title={gettext('Delete')}
-          onClick={this.props.deleteFileParticipant.bind(this, participant.email)}
-        ></i>
-      </div>
-    );
-  }
-}
-
-FileParticipantListItem.propTypes = fileParticipantListItemPropTypes;
-
-
-const fileParticipantDialogPropTypes = {
-  repoID: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  toggleFileParticipantDialog: PropTypes.func.isRequired,
-  fileParticipantList: PropTypes.array.isRequired,
-  onParticipantsChange: PropTypes.func,
-};
-
-class FileParticipantDialog extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOption: null,
-    };
-  }
-
-  handleSelectChange = (option) => {
-    this.setState({ selectedOption: option });
-  };
-
-  deleteFileParticipant = (email) => {
-    const { repoID, filePath } = this.props;
-    seafileAPI.deleteFileParticipant(repoID, filePath, email).then((res) => {
-      this.props.onParticipantsChange(repoID, filePath);
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-    this.refs.userSelect.clearSelect();
-  };
-
-  addFileParticipant = () => {
-    const { selectedOption } = this.state;
-    const { repoID, filePath } = this.props;
-    if (!selectedOption || selectedOption.length === 0) {
-      return;
-    }
-    let emails = selectedOption.map((option) => {return option.email;});
-    seafileAPI.addFileParticipants(repoID, filePath, emails).then((res) => {
-      this.props.onParticipantsChange(repoID, filePath);
-      res.data.failed.map(item => {
-        const msg = gettext('Failed to add {email_placeholder}: {error_msg_placeholder}')
-          .replace('{email_placeholder}', item.email)
-          .replace('{error_msg_placeholder}', item.error_msg);
-        toaster.danger(msg, {duration: 3});
-      });
-    }).catch(error => {
-      toaster.danger(Utils.getErrorMsg(error));
-    });
-    this.setState({ selectedOption: null });
-    this.refs.userSelect.clearSelect();
-  };
-
-  render() {
-    const renderParticipantList = this.props.fileParticipantList.map((participant, index) => {
-      return (
-        <FileParticipantListItem
-          key={index}
-          participant={participant}
-          deleteFileParticipant={this.deleteFileParticipant}
-        />
-      );
-    });
-
-    return (
-      <Modal isOpen={true} toggle={this.props.toggleFileParticipantDialog}>
-        <ModalHeader toggle={this.props.toggleFileParticipantDialog}>{gettext('Participants')}</ModalHeader>
-        <ModalBody>
-          <div className="participant-add">
-            <UserSelect
-              ref="userSelect"
-              isMulti={true}
-              className="participant-select"
-              placeholder={gettext('Search users...')}
-              onSelectChange={this.handleSelectChange}
-            />
-            <Button className="btn btn-secondary ml-2" onClick={this.addFileParticipant}>{gettext('Add')}</Button>
-          </div>
-          {renderParticipantList}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleFileParticipantDialog}>{gettext('Close')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-FileParticipantDialog.propTypes = fileParticipantDialogPropTypes;
-
-export default FileParticipantDialog;

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

@@ -7,7 +7,6 @@ import { gettext, username, siteRoot } 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 { MentionsInput, Mention } from 'react-mentions';
 import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
 import '../../css/comments-list.css';
@@ -137,7 +136,7 @@ class DetailCommentList extends React.Component {
   }
 
   render() {
-    const { repoID, filePath, fileParticipantList } = this.props;
+    const { repoID, filePath } = this.props;
     const { commentsList } = this.state;
     return (
       <div className="seafile-comment detail-comments h-100">
@@ -164,15 +163,6 @@ class DetailCommentList extends React.Component {
           }
         </div>
         <div className="seafile-comment-footer flex-shrink-0">
-          {fileParticipantList &&
-            <ParticipantsList
-              onParticipantsChange={this.props.onParticipantsChange}
-              participants={fileParticipantList}
-              repoID={repoID}
-              filePath={filePath}
-              showIconTip={true}
-            />
-          }
           <MentionsInput
             value={this.state.comment}
             onChange={this.handleCommentChange}

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

@@ -5,7 +5,6 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
-import ParticipantsList from '../file-view/participants-list';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -16,8 +15,6 @@ const propTypes = {
   path: PropTypes.string.isRequired,
   fileTagList: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
-  onParticipantsChange: PropTypes.func.isRequired,
-  fileParticipantList: PropTypes.array.isRequired,
 };
 
 class DetailListView extends React.Component {
@@ -61,7 +58,7 @@ class DetailListView extends React.Component {
   }
 
   render() {
-    let { direntType, direntDetail, fileTagList, fileParticipantList } = this.props;
+    let { direntType, direntDetail, fileTagList } = this.props;
     let position = this.getDirentPostion();
     let direntPath = this.getDirentPath();
     if (direntType === 'dir') {
@@ -103,20 +100,6 @@ class DetailListView extends React.Component {
                   <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
-              <tr className="file-participants">
-                <th>{gettext('Participants')}</th>
-                <td>
-                  {fileParticipantList &&
-                    <ParticipantsList
-                      onParticipantsChange={this.props.onParticipantsChange}
-                      participants={fileParticipantList}
-                      repoID={this.props.repoID}
-                      filePath={direntPath}
-                      showIconTip={false}
-                    />
-                  }
-                </td>
-              </tr>
             </tbody>
           </table>
           {this.state.isEditFileTagShow &&

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

@@ -173,8 +173,6 @@ class DirentDetail extends React.Component {
                 direntDetail={this.state.direntDetail}
                 fileTagList={dirent ? dirent.file_tags : fileTags}
                 onFileTagChanged={this.props.onFileTagChanged}
-                fileParticipantList={this.state.fileParticipantList}
-                onParticipantsChange={this.onParticipantsChange}
               />
             </div>
           }

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

@@ -5,7 +5,6 @@ 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 ParticipantsList from './participants-list';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { MentionsInput, Mention } from 'react-mentions';
@@ -159,7 +158,7 @@ class CommentPanel extends React.Component {
   }
 
   render() {
-    const { participants, commentsList } = this.state;
+    const { commentsList } = this.state;
     return (
       <div className="seafile-comment">
         <div className="seafile-comment-title flex-shrink-0">
@@ -190,15 +189,6 @@ class CommentPanel extends React.Component {
           }
         </div>
         <div className="seafile-comment-footer flex-shrink-0">
-          {participants &&
-            <ParticipantsList
-              onParticipantsChange={this.onParticipantsChange}
-              participants={participants}
-              repoID={repoID}
-              filePath={filePath}
-              showIconTip={true}
-            />
-          }
           <MentionsInput
             value={this.state.comment}
             onChange={this.handleCommentChange}

frontend/src/components/file-view/participants-list.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'reactstrap';
-import ModalPortal from '../modal-portal';
-import FileParticipantDialog from '../dialog/file-participant-dialog';
-import { gettext } from '../../utils/constants';
-import '../../css/participants-list.css';
-
-const propTypes = {
-  onParticipantsChange: PropTypes.func.isRequired,
-  participants: PropTypes.array.isRequired,
-  repoID: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  showIconTip: PropTypes.bool.isRequired,
-};
-
-class ParticipantsList extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showDialog : false,
-      tooltipOpen: false,
-    };
-    this.targetID = 'add-participant-icon';
-  }
-
-  toggleDialog = () => {
-    this.setState({ showDialog: !this.state.showDialog });
-  }
-
-  tooltipToggle = () => {
-    this.setState({ tooltipOpen: !this.state.tooltipOpen });
-  }
-
-  componentWillMount() {
-    this.targetID = this.targetID + Math.floor(Math.random() * 1000);
-  }
-
-  render() {
-    const { participants, repoID, filePath, showIconTip } = this.props;
-    return (
-      <div className="participants mb-2 position-relative">
-        {participants.map((item, index) => {
-          return <Participant item={item} index={index} key={index}/>;
-        })}
-        <span className="add-participants" onClick={this.toggleDialog} id={this.targetID}>
-          <i className="fas fa-plus-circle"></i>
-        </span>
-        {showIconTip &&
-          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target={this.targetID} placement='bottom' isOpen={this.state.tooltipOpen}>
-            {gettext('Add participants')}
-          </Tooltip>
-        }
-        {this.state.showDialog &&
-          <ModalPortal>
-            <FileParticipantDialog
-              repoID={repoID}
-              filePath={filePath}
-              toggleFileParticipantDialog={this.toggleDialog}
-              fileParticipantList={participants}
-              onParticipantsChange={this.props.onParticipantsChange}
-            />
-          </ModalPortal>
-        }
-      </div>
-    );
-  }
-}
-
-ParticipantsList.propTypes = propTypes;
-
-const ParticipantPropTypes = {
-  index: PropTypes.number.isRequired,
-  item: PropTypes.object.isRequired,
-};
-
-class Participant extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showAvatarTooltip: false,
-    };
-    this.targetID = 'participant-avatar-';
-  }
-
-  toggleAvatarTooltip = () => {
-    this.setState({ showAvatarTooltip: !this.state.showAvatarTooltip });
-  }
-
-  componentWillMount() {
-    this.targetID = this.targetID + this.props.index + Math.floor(Math.random() * 1000);
-  }
-
-  render() {
-    const { item, index } = this.props;
-    return (
-      <span className="participant-avatar">
-        <img src={item.avatar_url} className="avatar" id={this.targetID} alt="avatar" key={index}/>
-        <Tooltip toggle={this.toggleAvatarTooltip} delay={{show: 0, hide: 0}} target={this.targetID} placement='bottom' isOpen={this.state.showAvatarTooltip}>
-          {item.name}
-        </Tooltip>
-      </span>
-    );
-  }
-}
-
-Participant.propTypes = ParticipantPropTypes;
-
-export default ParticipantsList;

frontend/src/css/participants-list.css

@@ -1,62 +0,0 @@
-/* participants-list */
-.participants {
-  min-height: 20px;
-}
-.participants .avatar {
-  width: 28px;
-  height: 28px;
-  border: 2px solid #fff;
-}
-.participants .add-participants {
-  position: absolute;
-  cursor: pointer;
-  bottom: -3px;
-}
-.participants .add-participants i {
-  font-size: 16px;
-  color: #ff9800;
-  border: 2px solid #fff;
-  border-radius: 50%;
-}
-.participants .participant-avatar, .participants .add-participants {
-  margin-right: -0.5rem;
-}
-/* file-participant-dialog */
-.participant-add {
-  display: flex;
-  justify-content: space-between;
-}
-.participant-add .participant-select {
-  width: 385px;
-}
-.participant-add .btn {
-  width: 75px;
-}
-.participant-select-info {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.participant-select-avatar {
-  margin-right: 10px;
-}
-.participant-select-name {
-  height: 2rem;
-  line-height: 2rem;
-}
-.participant-select-error {
-  margin-top: 1em;
-}
-.participant-select .true__dropdown-indicator, .participant-select .true__indicator-separator {
-  display: none;
-}
-.participant-select-info i {
-  opacity: 0;
-  margin-right: 10px;
-}
-.participant-select-info:hover i {
-  cursor: pointer;
-  opacity: 1;
-  color: #a4a4a4;
-}

frontend/src/pages/markdown-editor/rich-markdown-editor/comment-panel.js

@@ -8,7 +8,6 @@ import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
 import toaster from '../../../components/toast';
-import ParticipantsList from '../../../components/file-view/participants-list';
 import CommentItem from './comment-item';
 
 import { defaultStyle, defaultMentionStyle } from '../../../css/react-mentions-default-style';
@@ -202,15 +201,6 @@ class CommentPanel extends React.Component {
           }
         </div>
         <div className="seafile-comment-footer flex-shrink-0">
-          {participants &&
-            <ParticipantsList
-              onParticipantsChange={this.onParticipantsChange}
-              participants={participants}
-              repoID={repoID}
-              filePath={filePath}
-              showIconTip={true}
-            />
-          }
           <MentionsInput
             value={this.state.comment}
             onChange={this.handleCommentChange}

frontend/src/pages/markdown-editor/rich-markdown-editor/detail-list-view.js

@@ -4,7 +4,6 @@ import moment from 'moment';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import EditFileTagDialog from '../../../components/dialog/edit-filetag-dialog';
-import ParticipantsList from '../../../components/file-view/participants-list';
 
 import '../../../css/dirent-detail.css';
 import '../css/detail-list-view.css';
@@ -14,9 +13,7 @@ const { repoID, filePath } = window.app.pageOptions;
 const propTypes = {
   fileInfo: PropTypes.object.isRequired,
   fileTagList: PropTypes.array.isRequired,
-  participants: PropTypes.array.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired
-  onFileTagChanged: PropTypes.func.isRequired,
-  onParticipantsChange: PropTypes.func.isRequired,
 };
 
 class DetailListView extends React.Component {
@@ -33,7 +30,7 @@ class DetailListView extends React.Component {
   }
 
   render() {
-    const { fileTagList, participants, fileInfo } = this.props;
+    const { fileTagList, fileInfo } = this.props;
     return (
       <Fragment>
         <div className="dirent-table-container p-2">
@@ -61,20 +58,6 @@ class DetailListView extends React.Component {
                   <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
-              <tr className="file-participants">
-                <th>{gettext('Participants')}</th>
-                <td>
-                  {participants &&
-                    <ParticipantsList
-                      repoID={repoID}
-                      filePath={filePath}
-                      participants={participants}
-                      showIconTip={true}
-                      onParticipantsChange={this.props.onParticipantsChange}
-                    />
-                  }
-                </td>
-              </tr>
             </tbody>
           </table>
         </div>

frontend/src/pages/markdown-editor/rich-markdown-editor/side-panel.js

@@ -84,9 +84,7 @@ class SidePanel extends React.PureComponent {
             <DetailListView
               fileInfo={this.props.fileInfo}
               fileTagList={this.props.fileTagList}
-              participants={this.props.participants}
               onFileTagChanged={this.props.onFileTagChanged}
-              onParticipantsChange={this.props.onParticipantsChange}
             />
           }
         </div>