Better manage in the feedback for user input in add team member modal

[dcoa]

Enhancement

Context:

Related link #3 (comment)

For the multiple user input, the input need a better way to display the error users when the save action is trigger and the textarea modified.

Currently the modal validates the input as follows:

• Add a user or multiple emails or usernames comma separated
• If the user exist and the role assignment was successful then close the modal.
• If there is a multi user assignment and was partially completed, the users who pass are removed from the input and the error uses are displayed and marked in red.

During the development the input was manage to validate if the user modify the input and do not introduce the previous error return the color to black, but if the some of the error users are in the textarea this keeps the red color.

As is displayed here #3 (comment)

The idea here is think in a better way to display the error uses and their validation if possible.

[BryanttV]

Doing some tests on a remote environment, I was experiencing something related to this issue, so I'm leaving it here to keep it in mind when addressing it. This is the scenario:

1. I have two users (bryannv and john with the library_admin role).
2. I go to add new team members.
3. I add the previously mentioned users to the list, and additionally I add two more (majo-admin and mafermazu).
4. When I click Save, the last two users are added, but there is no feedback to the user. I have to check the list to confirm that they were actually added.
5. When I try to add more than one user to a role they already have assigned, it also doesn’t return any feedback.
6. It only shows feedback when it's done with a single user.

admin-console-issue-14.mp4

[MaferMazu]

I put the label bug because the behavior @BryanttV mentioned causes the modal not to close as it should.

cc @dcoa

[dcoa]

@jacobo-dominguez-wgu Could you help me to address the reported issue, please?

The error is the validation to display the error message in the AddNewTeamMemberTrigger, because the use cases validation is complex:

1. one user added already has role
2. multiple user added has the role
3. one user added added to the team
4. multiple user added to the tea
5. one user added not found
6. multiple user added not found
7. user/multiple users added , user/multiple users has role
8. user/multiple users added , user/multiple users no found
9. user/multiple users added , user/multiple users no found, user/multiple users has role
10. other errors generic message (just in case)

For maintainability and readily of the code, and display the right information to the user, I think is better to manage separate toasts messages for each status (added | has role | not found), instead of combining all in one.

Maybe something like this:

const handleErrors = (
   errors: PutAssignTeamMembersRoleResponse['errors'],
   successfulCount: number,
 ) => {
   const notFoundUsers = errors
     .filter((err) => err.error === RoleOperationErrorStatus.USER_NOT_FOUND)
     .map((err) => err.userIdentifier.trim());

   const alreadyHasRole = errors
     .filter((err) => err.error === RoleOperationErrorStatus.USER_ALREADY_HAS_ROLE)
     .map((err) => err.userIdentifier.trim());
   
   const otherErrors = errors.filter(
     (err) => 
       err.error !== RoleOperationErrorStatus.USER_NOT_FOUND &&
       err.error !== RoleOperationErrorStatus.USER_ALREADY_HAS_ROLE
   );

   const hasNotFoundErrors = notFoundUsers.length > 0;
   const hasExistingRoleErrors = alreadyHasRole.length > 0;
   const hasOtherErrors = otherErrors.length > 0;
   
   let shouldClose = true; 

   if (successfulCount > 0) {
     const successMessage = intl.formatMessage(messages['libraries.authz.manage.add.member.success'], {
       count: successfulCount,
       Bold,
       Br,
     });
     showToast({ message: successMessage, type: 'success' });
   }

   if (hasExistingRoleErrors) {
     const warningMessage = intl.formatMessage(messages['libraries.authz.manage.assign.role.existing'], {
       count: alreadyHasRole.length,
       Bold,
       Br,
     });
     showToast({ message: warningMessage, type: 'error' });
   }
  
 // keep the modal open
   if (hasNotFoundErrors) {
       shouldClose = false;
   }
   
   if (hasNotFoundErrors) {
     setErrorUsers(notFoundUsers);
     setIsError(true);
     setFormValues((prev) => ({
       ...prev,
       users: notFoundUsers.join(', '),
     }));

     const notFoundMessage = intl.formatMessage(messages['libraries.authz.manage.add.member.failure'], {
         count: notFoundUsers.length,
         Bold,
         Br,
     });
     showToast({ message: notFoundMessage, type: 'error' });
   }

   if (hasOtherErrors) {
       const otherErrorMessage = intl.formatMessage(authzMessages['library.authz.team.toast.default.error.message'], {
           count: otherErrors.length, 
           Bold,
           Br,
       });

       showToast({ message: otherErrorMessage, type: 'error' });
   }
   
   if (shouldClose) {
     handleClose();
   }
 };

C.C. @MaferMazu

[jacobo-dominguez-wgu]

After reviewing the components and the process on handling the feedback for the team member modal, I came with the next proposal:

1. Adopt @dcoa suggestion for handling errors to display a different toast for each status (added | has role | not found | generic error) instead of combining all in one.
2. Update the toast messages (both errors and successful) to include the userIds (username | email) corresponding to the message displayed. This way we can identify which message corresponds to which userId in cases when we are adding roles to many userIds and more than one toast shows screen, this will apply to success or error toasts. Example:

3. If the feedback has an error, show in red color the userIds related to the errors in the input textarea and remove from the textarea the ids with successful feedback (This is already happening but only for user not found error, it would be nice to adapt it for the rest of errors).
4. Do not automatically close the modal if the feedback includes an error, so the user can verify and update their input if needed.
5. Increase the time the toast message automatically closes for cases when there are more than 1 message. Currently it is set for 5 seconds (it could be extended to 10 seconds or 5 seconds for every toast shown).

I would like to know your thoughts before proceeding with the implementation @MaferMazu, @BryanttV, @mariajgrimaldi