Merge pull request #2875 from appirio-tech/cf15

Cf15

Author: RishiRajSahu

package-lock.json

@@ -130,7 +130,7 @@
     "react-s-alert": "^1.1.4",
     "react-scroll": "^1.7.6",
     "react-scroll-lock-component": "^1.1.2",
-    "react-select": "^0.9.1",
+    "react-select": "^2.4.0",
     "react-stickynode": "^1.2.1",
     "react-text-truncate": "^0.8.3",
     "react-transition-group": "^2.5.0",

package.json

@@ -25,7 +25,7 @@ export default class AddComment extends React.Component {
   }
 
   render() {
-    const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers } = this.props
+    const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers, projectMembers } = this.props
 
     return (
       <RichTextArea ref="richTextArea"
@@ -39,6 +39,7 @@ export default class AddComment extends React.Component {
         avatarUrl={avatarUrl}
         authorName={authorName}
         allMembers={allMembers}
+        projectMembers={projectMembers}
       />
     )
   }
@@ -54,5 +55,6 @@ AddComment.propTypes = {
   placeholder: PropTypes.string,
   hasError: PropTypes.bool,
   isAdding: PropTypes.bool,
-  allMembers: PropTypes.object
+  allMembers: PropTypes.object,
+  projectMembers: PropTypes.object
 }

src/components/ActionCard/AddComment.jsx

@@ -58,7 +58,7 @@ class Comment extends React.Component {
   }
 
   render() {
-    const {message, author, date, edited, children, noInfo, self, isSaving, hasError, readonly, allMembers, canDelete} = this.props
+    const {message, author, date, edited, children, noInfo, self, isSaving, hasError, readonly, allMembers, canDelete, projectMembers} = this.props
     const messageAnchor = `comment-${message.id}`
     const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#${messageAnchor}`
     const authorName = author ? (author.firstName + ' ' + author.lastName) : 'Connect user'
@@ -84,6 +84,7 @@ class Comment extends React.Component {
             authorName={authorName}
             cancelEdit={this.cancelEdit}
             allMembers={allMembers}
+            projectMembers={projectMembers}
             editingTopic = {false}
           />
         </div>
@@ -194,7 +195,7 @@ Comment.propTypes = {
    */
   readonly: PropTypes.bool,
   allMembers: PropTypes.object.isRequired,
-
+  projectMembers: PropTypes.object,
   /**
    * If true only comment text is shown without additional info
    */

src/components/ActionCard/Comment.jsx

@@ -86,7 +86,7 @@ class Feed extends React.Component {
       id, user, currentUser, topicMessage, totalComments, hasMoreComments, onLoadMoreComments, isLoadingComments,
       allowComments, comments, children, onNewCommentChange, onAddNewComment, isAddingComment, onSaveMessageChange,
       onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, allMembers,
-      onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId
+      onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId, projectMembers
     } = this.props
     const { editTopicMode, headerHeight } = this.state
     let authorName = user ? user.firstName : 'Unknown'
@@ -177,6 +177,7 @@ class Feed extends React.Component {
           onSaveMessage={onSaveMessage}
           onDeleteMessage={onDeleteMessage}
           allMembers={allMembers}
+          projectMembers={projectMembers}
           isFullScreen={isFullScreen}
           headerHeight={headerHeight}
           commentId={commentId}

src/components/Feed/Feed.jsx

@@ -179,7 +179,7 @@ class FeedComments extends React.Component {
     const {
       comments, currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
       onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage, allMembers,
-      totalComments, isFullScreen, headerHeight
+      totalComments, isFullScreen, headerHeight, projectMembers
     } = this.props
     const { isNewCommentMobileOpen, stickyRowNext, stickyRowPrev } = this.state
     let authorName = currentUser.firstName
@@ -319,6 +319,7 @@ class FeedComments extends React.Component {
           isSaving={item.isSavingComment}
           hasError={item.error}
           allMembers={allMembers}
+          projectMembers={projectMembers}
           noInfo={item.noInfo}
           canDelete={idx !== 0}
         >
@@ -389,6 +390,7 @@ class FeedComments extends React.Component {
                     isAdding={isAddingComment}
                     hasError={error}
                     allMembers={allMembers}
+                    projectMembers={projectMembers}
                   />
                 </div>
               }

src/components/Feed/FeedComments.jsx

@@ -13,7 +13,7 @@ class NewPost extends React.Component {
   }
 
   render() {
-    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder} = this.props
+    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder, projectMembers} = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
       authorName += ' ' + currentUser.lastName
@@ -38,6 +38,7 @@ class NewPost extends React.Component {
         avatarUrl={currentUser.photoURL}
         authorName={authorName}
         allMembers={allMembers}
+        projectMembers={projectMembers}
       />
     )
   }
@@ -48,6 +49,7 @@ NewPost.propTypes = {
   expandedTitlePlaceholder: PropTypes.string,
   currentUser: PropTypes.object.isRequired,
   allMembers: PropTypes.object.isRequired,
+  projectMembers: PropTypes.object,
   onPost: PropTypes.func.isRequired,
   onNewPostChange: PropTypes.func.isRequired,
   hasError: PropTypes.bool,

src/components/Feed/NewPost.jsx

@@ -4,11 +4,12 @@ import Modal from 'react-modal'
 import { mapKeys, get } from 'lodash'
 
 import UserAutoComplete from '../UserAutoComplete/UserAutoComplete'
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator'
 
 import './AddFilePermissions.scss'
 import XMarkIcon from  '../../assets/icons/icon-x-mark.svg'
 
-const AddFilePermission = ({ onCancel, onSubmit, onChange, selectedUsers, projectMembers, loggedInUser }) => {
+const AddFilePermission = ({ onCancel, onSubmit, onChange, selectedUsers, projectMembers, loggedInUser, isSharingAttachment }) => {
   selectedUsers = selectedUsers || ''
   const mapHandlesToUserIds = handles => {
     const projectMembersByHandle = mapKeys(projectMembers, value => value.handle)
@@ -28,10 +29,18 @@ const AddFilePermission = ({ onCancel, onSubmit, onChange, selectedUsers, projec
           <span onClick={onCancel}><XMarkIcon /></span>
         </div>
 
+        <div styleName="loading-indicator-wrapper">
+          { isSharingAttachment && <LoadingIndicator isSmall /> }
+        </div>
+
         {/* Share with all members */}
         <div className="dialog-body">
           <div styleName="btn-all-members">
-            <button className="tc-btn tc-btn-primary tc-btn-md" onClick={() => onSubmit(null)}>All project members</button>
+            <button
+              className="tc-btn tc-btn-primary tc-btn-md"
+              onClick={() => onSubmit(null)}
+              disabled={isSharingAttachment}
+            >All project members</button>
           </div>
         </div>
 
@@ -41,10 +50,10 @@ const AddFilePermission = ({ onCancel, onSubmit, onChange, selectedUsers, projec
 
           <UserAutoComplete projectMembers={projectMembers} selectedUsers={selectedUsers} onUpdate={onChange} loggedInUser={loggedInUser} />
 
-          <div>
+          <div styleName="btn-selected-members">
             <button className="tc-btn tc-btn-primary tc-btn-md" 
               onClick={() => onSubmit(mapHandlesToUserIds(selectedUsers.split(',')))}
-              disabled={!selectedUsers || selectedUsers.length === 0 }
+              disabled={!selectedUsers || selectedUsers.length === 0 || isSharingAttachment }
             >Share with selected members</button>
           </div>
         </div>
@@ -59,7 +68,8 @@ AddFilePermission.propTypes = {
   onChange: PropTypes.func.isRequired, 
   selectedUsers: PropTypes.string, 
   projectMembers: PropTypes.object, 
-  loggedInUser: PropTypes.object.isRequired
+  loggedInUser: PropTypes.object.isRequired,
+  isSharingAttachment: PropTypes.bool.isRequired,
 }
 
 export default AddFilePermission

src/components/FileList/AddFilePermissions.jsx

@@ -1,4 +1,13 @@
 .btn-all-members {
   text-align: center;
   margin-top: 8px;
+}
+
+.loading-indicator-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.btn-selected-members {
+  margin-top: 10px;
 }

src/components/FileList/AddFilePermissions.scss

@@ -113,10 +113,10 @@ export default class FileListItem extends React.Component {
         { (errors && errors.title) && <div className="error-message">{ errors.title }</div> }
         <textarea defaultValue={description} ref="desc" maxLength={250} className="tc-textarea" />
         { (errors && errors.desc) && <div className="error-message">{ errors.desc }</div> }
-        <UserAutoComplete onUpdate={this.onUserIdChange} 
+        <UserAutoComplete onUpdate={this.onUserIdChange}
           projectMembers={projectMembers}
           loggedInUser={loggedInUser}
-          selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}  
+          selectedUsers={this.userIdsToHandles(allowedUsers).join(',')}
         />
       </div>
     )