fixes issue 2863

Author: sumitdaga

src/components/FileList/AddFilePermissions.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.scss

@@ -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/LinksMenu/FileLinksMenu.jsx

@@ -38,6 +38,7 @@ const FileLinksMenu = ({
   selectedUsers,
   onAddAttachment,
   onUploadAttachment,
+  isSharingAttachment,
   discardAttachments,
   onChangePermissions,
   pendingAttachments,
@@ -118,6 +119,7 @@ const FileLinksMenu = ({
             selectedUsers={selectedUsers}
             projectMembers={projectMembers}
             loggedInUser={loggedInUser}
+            isSharingAttachment={isSharingAttachment}
           />
         }
 
@@ -243,6 +245,7 @@ FileLinksMenu.propTypes = {
   projectMembers: PropTypes.object,
   pendingAttachments: PropTypes.object,
   onUploadAttachment: PropTypes.func,
+  isSharingAttachment: PropTypes.bool.isRequired,
   discardAttachments: PropTypes.func,
   onChangePermissions: PropTypes.func,
   attachmentsStorePath: PropTypes.string.isRequired,

src/projects/detail/containers/ProjectInfoContainer.js

@@ -46,6 +46,7 @@ class ProjectInfoContainer extends React.Component {
       !_.isEqual(nextProps.isProjectProcessing, this.props.isProjectProcessing) ||
       !_.isEqual(nextProps.attachmentsAwaitingPermission, this.props.attachmentsAwaitingPermission) ||
       !_.isEqual(nextProps.attachmentPermissions, this.props.attachmentPermissions) ||
+      !_.isEqual(nextProps.isSharingAttachment, this.props.isSharingAttachment) ||
       nextProps.activeChannelId !== this.props.activeChannelId
   }
 
@@ -149,7 +150,7 @@ class ProjectInfoContainer extends React.Component {
       hideInfo, hideLinks, hideMembers, onChannelClick, activeChannelId, productsTimelines,
       isManageUser, phasesTopics, isProjectPlan, isProjectProcessing, projectTemplates,
       attachmentsAwaitingPermission, addProjectAttachment, discardAttachments, attachmentPermissions,
-      changeAttachmentPermission, projectMembers, loggedInUser } = this.props
+      changeAttachmentPermission, projectMembers, loggedInUser, isSharingAttachment } = this.props
     let directLinks = null
     // check if direct links need to be added
     const isMemberOrCopilot = _.indexOf([PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER], currentMemberRole) > -1
@@ -271,6 +272,7 @@ class ProjectInfoContainer extends React.Component {
             onAddNewLink={this.onAddFile}
             onAddAttachment={addProjectAttachment}
             onUploadAttachment={this.onUploadAttachment}
+            isSharingAttachment={isSharingAttachment}
             discardAttachments={discardAttachments}
             onChangePermissions={changeAttachmentPermission}
             selectedUsers={attachmentPermissions}
@@ -321,6 +323,7 @@ const mapStateToProps = ({ templates, projectState, members, loadUser }) => {
     projectTemplates : templates.projectTemplates,
     attachmentsAwaitingPermission: projectState.attachmentsAwaitingPermission,
     attachmentPermissions: projectState.attachmentPermissions,
+    isSharingAttachment: projectState.processingAttachments,
     projectMembers:  _.keyBy(projectMembers, 'userId'),
     loggedInUser: loadUser.user
   })