Merge pull request #3403 from sumitdaga/F2F_30109948

feat: show loading indicator during member role switching

ref issue #3391

Author: maxceem

src/components/TeamManagement/TeamManagement.jsx

@@ -59,7 +59,7 @@ class TeamManagement extends React.Component {
       projectTeamInvites, onProjectInviteDeleteConfirm, onProjectInviteSend, deletingInvite, changeRole,
       onDeleteInvite, isShowTopcoderDialog, onShowTopcoderDialog, processingInvites, processingMembers,
       onTopcoderInviteSend, onTopcoderInviteDeleteConfirm, topcoderTeamInvites, onAcceptOrRefuse, error,
-      onSelectedMembersUpdate, selectedMembers, allMembers,
+      onSelectedMembersUpdate, selectedMembers, allMembers, updatingMemberIds
     } = this.props
     const currentMember = members.filter((member) => member.userId === currentUser.userId)[0]
     const modalActive = isAddingTeamMember || deletingMember || isShowJoin || showNewMemberConfirmation || deletingInvite
@@ -222,6 +222,7 @@ class TeamManagement extends React.Component {
           return (
             <TopcoderDialog
               processingInvites={processingInvites}
+              updatingMemberIds={updatingMemberIds}
               error={error}
               currentUser={currentUser}
               members={members}
@@ -438,6 +439,11 @@ TeamManagement.propTypes = {
    */
   processingMembers: PropTypes.bool.isRequired,
 
+  /**
+   * List of member ids being updated
+   */
+  updatingMemberIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+
   /**
    * Flag indicates if invite API is running
    */

src/components/TeamManagement/TeamManagement.scss

@@ -260,6 +260,14 @@
             background: white;
             min-width: 300px;
 
+            &.is-processing {
+              justify-content: center;
+              align-items: center;
+              height: 36px;
+              border: 0;
+              background: transparent;
+            }
+
             .Tooltip {
               align-items: center;
               display: flex;

src/components/TeamManagement/TopcoderManagementDialog.js

@@ -154,7 +154,7 @@ class TopcoderManagementDialog extends React.Component {
   render() {
     const {
       members, currentUser, isMember, removeMember, onCancel, removeInvite, approveOrDecline, topcoderTeamInvites = [],
-      selectedMembers, processingInvites,
+      selectedMembers, processingInvites, updatingMemberIds
     } = this.props
     const { processingInviteRequestId } = this.state
     const showRemove = currentUser.isAdmin || (isMember && checkPermission(PERMISSIONS.INVITE_TOPCODER_MEMBER))
@@ -187,6 +187,7 @@ class TopcoderManagementDialog extends React.Component {
               }
               const userFullName = getFullNameWithFallback(member)
               const role = _.get(_.find(this.roles, r => r.value === member.role), 'title')
+              const isMemberProcessing = _.includes(updatingMemberIds, member.id)
               return (
                 <div
                   key={i}
@@ -229,36 +230,39 @@ class TopcoderManagementDialog extends React.Component {
                       this.onUserRoleChange(member.userId, member.id, type)
                     }
                     return (
-                      <div className="member-role-container">
-                        {types.map((type) => {
-                          const isCopilotDisabled =
-                            type === 'Copilot' &&
-                            type !== currentType &&
-                            !(currentUser.isCopilotManager || currentUser.isAdmin)
-
-                          return (
-                            isCopilotDisabled ? (
-                              <Tooltip theme="light" key={type}>
-                                <div className="tooltip-target">
-                                  <div className="member-role disabled">
+                      <div className={`member-role-container ${isMemberProcessing ? 'is-processing' : ''}`}>
+                        {
+                          isMemberProcessing ? <LoadingIndicator isSmall /> :
+                            types.map((type) => {
+                              const isCopilotDisabled =
+                                type === 'Copilot' &&
+                                type !== currentType &&
+                                !(currentUser.isCopilotManager || currentUser.isAdmin)
+
+                              return (
+                                isCopilotDisabled ? (
+                                  <Tooltip theme="light" key={type}>
+                                    <div className="tooltip-target">
+                                      <div className="member-role disabled">
+                                        {type}
+                                      </div>
+                                    </div>
+                                    <div className="tooltip-body">
+                                      {'Only Connect Copilot Managers can change member role to copilots.'}
+                                    </div>
+                                  </Tooltip>
+                                ) : (
+                                  <div
+                                    key={type}
+                                    onClick={() => onClick(type)}
+                                    className={cn('member-role', { active: type === currentType })}
+                                  >
                                     {type}
                                   </div>
-                                </div>
-                                <div className="tooltip-body">
-                                  {'Only Connect Copilot Managers can change member role to copilots.'}
-                                </div>
-                              </Tooltip>
-                            ) : (
-                              <div
-                                key={type}
-                                onClick={() => onClick(type)}
-                                className={cn('member-role', { active: type === currentType })}
-                              >
-                                {type}
-                              </div>
-                            )
-                          )
-                        })}
+                                )
+                              )
+                            })
+                        }
                       </div>
                     )
                   })()}

src/projects/actions/projectMember.js

@@ -74,7 +74,8 @@ export function updateProjectMember(projectId, memberId, member) {
   return (dispatch) => {
     return dispatch({
       type: UPDATE_PROJECT_MEMBER,
-      payload: updateMember(projectId, memberId, member)
+      payload: updateMember(projectId, memberId, member),
+      meta: { memberId }
     })
   }
 }

src/projects/detail/containers/TeamManagementContainer.jsx

@@ -203,6 +203,7 @@ class TeamManagementContainer extends Component {
           history={this.props.history}
           onUserInviteAction={this.onUserInviteAction}
           processingMembers={this.props.processingMembers}
+          updatingMemberIds={this.props.updatingMemberIds}
           processingInvites={this.props.processingInvites}
           error={this.props.error}
           currentUser={this.props.currentUser}
@@ -246,6 +247,7 @@ const mapStateToProps = ({loadUser, members, projectState}) => {
     allMembers: _.values(members.members),
     processingInvites: projectState.processingInvites,
     processingMembers: projectState.processingMembers,
+    updatingMemberIds: projectState.updatingMemberIds,
     error: projectState.error,
     topcoderTeamInvites: _.filter(projectState.project.invites, i => i.role !== 'customer'),
     projectTeamInvites: _.filter(projectState.project.invites, i => i.role === 'customer')
@@ -277,6 +279,7 @@ TeamManagementContainer.propTypes = {
   allMembers: PropTypes.arrayOf(PropTypes.object).isRequired,
   projectId: PropTypes.number.isRequired,
   processingMembers: PropTypes.bool.isRequired,
+  updatingMemberIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   processingInvites: PropTypes.bool.isRequired,
   error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   projectTeamInvites: PropTypes.arrayOf(PropTypes.object),

src/projects/reducers/project.js

@@ -32,6 +32,7 @@ const initialState = {
   isLoading: true,
   processing: false,
   processingMembers: false,
+  updatingMemberIds: [],
   processingInvites: false,
   processingAttachments: false,
   attachmentsAwaitingPermission: null,
@@ -624,11 +625,15 @@ export const projectState = function (state=initialState, action) {
 
   case ADD_PROJECT_MEMBER_PENDING:
   case REMOVE_PROJECT_MEMBER_PENDING:
-  case UPDATE_PROJECT_MEMBER_PENDING:
     return Object.assign({}, state, {
       processingMembers: true
     })
 
+  case UPDATE_PROJECT_MEMBER_PENDING:
+    return Object.assign({}, state, {
+      updatingMemberIds: [ ...state.updatingMemberIds, action.meta.memberId ]
+    })
+
   case ADD_PROJECT_MEMBER_SUCCESS:
     return update (state, {
       processingMembers: { $set : false },
@@ -694,9 +699,9 @@ export const projectState = function (state=initialState, action) {
     })
     updatedMembers.splice(idx, 1, action.payload)
     return update(state, {
-      processingMembers: { $set : false },
       project: { members: { $set: updatedMembers } },
-      projectNonDirty: { members: { $set: updatedMembers } }
+      projectNonDirty: { members: { $set: updatedMembers } },
+      updatingMemberIds: { $set: _.xor(state.updatingMemberIds, [action.payload.id]) }
     })
   }
 
@@ -821,7 +826,6 @@ export const projectState = function (state=initialState, action) {
   case REMOVE_TOPCODER_MEMBER_INVITE_FAILURE:
   case REMOVE_CUSTOMER_INVITE_FAILURE:
   case REMOVE_PROJECT_MEMBER_FAILURE:
-  case UPDATE_PROJECT_MEMBER_FAILURE:
   case UPDATE_PROJECT_ATTACHMENT_FAILURE:
   case ADD_PROJECT_ATTACHMENT_FAILURE:
   case REMOVE_PROJECT_ATTACHMENT_FAILURE:
@@ -848,6 +852,11 @@ export const projectState = function (state=initialState, action) {
       error: parseErrorObj(action),
       inviteError: parseErrorObj(action)
     })
+  case UPDATE_PROJECT_MEMBER_FAILURE:
+    return Object.assign({}, state, {
+      updatingMemberIds: _.remove(state.updatingMemberIds, [action.payload.id]),
+      error: parseErrorObj(action)
+    })
 
   default:
     return state

src/reducers/alerts.js

@@ -217,6 +217,14 @@ export default function(state = {}, action) {
     Alert.error('You are unable to invite members successfully.')
     return state
 
+  case UPDATE_PROJECT_MEMBER_SUCCESS:
+    Alert.success('Member updated successfully.')
+    return state
+
+  case UPDATE_PROJECT_MEMBER_FAILURE:
+    Alert.error('Error updating member.')
+    return state
+
   case ACCEPT_OR_REFUSE_INVITE_SUCCESS:
     if (action.payload.status===PROJECT_MEMBER_INVITE_STATUS_ACCEPTED){
       Alert.success('You\'ve successfully joined the project.')
@@ -243,7 +251,6 @@ export default function(state = {}, action) {
   case UPDATE_PROJECT_ATTACHMENT_FAILURE:
   case REMOVE_PROJECT_ATTACHMENT_FAILURE:
   case ADD_PROJECT_MEMBER_FAILURE:
-  case UPDATE_PROJECT_MEMBER_FAILURE:
   case REMOVE_PROJECT_MEMBER_FAILURE:
   case CREATE_PROJECT_FEED_COMMENT_FAILURE:
   case SAVE_PROJECT_FEED_COMMENT_FAILURE: