fix: add/remove group member with non-lowercase email (#1464)

* fix: add/remove group member with non-lowercase email

* fix: preserve original cased validated emails

* docs: comment on removeStringsFromListCaseInsensitive implementation

* fix: bug in removeStringsFromListCaseInsensitive

* fix: LearnerDetailPage unit test

* chore: use lodash without

Author: marlonkeating

src/components/PeopleManagement/AddMembersModal/AddMembersModal.jsx

@@ -24,7 +24,7 @@ const AddMembersModal = ({
   groupUuid,
 }) => {
   const intl = useIntl();
-  const { lowerCasedEmails: learnerEmails, canInvite: canInviteMembers } = useValidatedEmailsContext();
+  const { validatedEmails: learnerEmails, canInvite: canInviteMembers } = useValidatedEmailsContext();
   const [addButtonState, setAddButtonState] = useState('default');
   const [isSystemErrorModalOpen, openSystemErrorModal, closeSystemErrorModal] = useToggle(false);
   const handleCloseAddMembersModal = () => {

src/components/PeopleManagement/AddMembersModal/AddMembersModalContent.jsx

@@ -13,7 +13,7 @@ import FileUpload from '../../learner-credit-management/invite-modal/FileUpload'
 import EnterpriseCustomerUserDataTable from '../EnterpriseCustomerUserDataTable';
 import { useEnterpriseLearners } from '../../learner-credit-management/data';
 import { HELP_CENTER_URL } from '../constants';
-import { removeStringsFromList, splitAndTrim } from '../../../utils';
+import { removeStringsFromListCaseInsensitive, splitAndTrim } from '../../../utils';
 import { addEmailsAction, initializeEnterpriseEmailsAction } from '../data/actions';
 import { useValidatedEmailsContext } from '../data/ValidatedEmailsContext';
 
@@ -23,14 +23,14 @@ const AddMembersModalContent = ({
   enterpriseGroupLearners,
 }) => {
   const memberInviteMetadata = useValidatedEmailsContext();
-  const { dispatch, lowerCasedEmails } = memberInviteMetadata;
+  const { dispatch, validatedEmails } = memberInviteMetadata;
   const { allEnterpriseLearners } = useEnterpriseLearners({ enterpriseUUID });
 
   const handleCsvUpload = useCallback((csv) => {
     let emails = splitAndTrim('\n', csv);
-    emails = removeStringsFromList(emails, lowerCasedEmails);
+    emails = removeStringsFromListCaseInsensitive(emails, validatedEmails);
     dispatch(addEmailsAction({ emails, clearErroredEmails: true, actionType: 'UPLOAD_CSV_ACTION' }));
-  }, [dispatch, lowerCasedEmails]);
+  }, [dispatch, validatedEmails]);
 
   useEffect(() => {
     const groupEnterpriseLearners = enterpriseGroupLearners.map((learner) => learner?.memberDetails?.userEmail);

src/components/PeopleManagement/CreateGroupModal.jsx

@@ -25,7 +25,7 @@ const CreateGroupModal = ({
 }) => {
   const intl = useIntl();
   const {
-    lowerCasedEmails: learnerEmails,
+    validatedEmails: learnerEmails,
     canInvite: canInviteMembers,
     isCreateGroupFileUpload,
     isCreateGroupListSelection,

src/components/PeopleManagement/CreateGroupModalContent.jsx

@@ -12,7 +12,7 @@ import InviteSummaryCount from '../learner-credit-management/invite-modal/Invite
 import FileUpload from '../learner-credit-management/invite-modal/FileUpload';
 import { HELP_CENTER_URL, MAX_LENGTH_GROUP_NAME } from './constants';
 import EnterpriseCustomerUserDataTable from './EnterpriseCustomerUserDataTable';
-import { removeStringsFromList, splitAndTrim } from '../../utils';
+import { removeStringsFromListCaseInsensitive, splitAndTrim } from '../../utils';
 import { useValidatedEmailsContext } from './data/ValidatedEmailsContext';
 import { addEmailsAction, initializeEnterpriseEmailsAction } from './data/actions';
 
@@ -21,7 +21,7 @@ const CreateGroupModalContent = ({
   onSetGroupName,
 }) => {
   const memberInviteMetadata = useValidatedEmailsContext();
-  const { dispatch, lowerCasedEmails } = memberInviteMetadata;
+  const { dispatch, validatedEmails } = memberInviteMetadata;
   const [groupNameLength, setGroupNameLength] = useState(0);
   const [groupName, setGroupName] = useState('');
 
@@ -41,9 +41,9 @@ const CreateGroupModalContent = ({
 
   const handleCsvUpload = useCallback((csv) => {
     let emails = splitAndTrim('\n', csv);
-    emails = removeStringsFromList(emails, lowerCasedEmails);
+    emails = removeStringsFromListCaseInsensitive(emails, validatedEmails);
     dispatch(addEmailsAction({ emails, clearErroredEmails: true, actionType: 'UPLOAD_CSV_ACTION' }));
-  }, [dispatch, lowerCasedEmails]);
+  }, [dispatch, validatedEmails]);
 
   useEffect(() => {
     // Initialize upon first entry

src/components/PeopleManagement/EnterpriseCustomerUserDataTable.jsx

@@ -46,9 +46,11 @@ const CustomSelectColumnCell = ({ row }) => {
     itemCount,
     controlledTableSelections: [, dataTableDispatch],
   } = dataTableContext;
-  const { dispatch: validateEmailsDispatch, lowerCasedEmails, groupEnterpriseLearners } = useValidatedEmailsContext();
+  const {
+    dispatch: validateEmailsDispatch, lowerCasedEmails, groupEnterpriseLearners,
+  } = useValidatedEmailsContext();
   const isAddedMember = groupEnterpriseLearners.includes(selectedEmail);
-  const isValidated = lowerCasedEmails.includes(selectedEmail);
+  const isValidated = lowerCasedEmails.includes(selectedEmail.toLowerCase());
 
   const toggleSelected = useCallback(
     () => {

src/components/PeopleManagement/LearnerDetailPage/CourseEnrollments.jsx

@@ -17,13 +17,13 @@ const CourseEnrollments = ({ userEmail, lmsUserId, enterpriseUuid }) => {
       ) : (
         <>
           <h3>Enrollments</h3>
-          {enrollments.completed.map((enrollment) => (
+          {enrollments?.completed?.map((enrollment) => (
             <EnrollmentCard enrollment={enrollment} />
           ))}
-          {enrollments.inProgress.map((enrollment) => (
+          {enrollments?.inProgress?.map((enrollment) => (
             <EnrollmentCard enrollment={enrollment} />
           ))}
-          {enrollments.upcoming.map((enrollment) => (
+          {enrollments?.upcoming?.map((enrollment) => (
             <EnrollmentCard enrollment={enrollment} />
           ))}
         </>

src/components/PeopleManagement/data/ValidatedEmailsContext.tsx

@@ -18,6 +18,7 @@ export const initialContext: ValidatedEmailsContext = {
   isValidInput: true,
   isCreateGroupFileUpload: false,
   isCreateGroupListSelection: false,
+  validatedEmails: [],
   lowerCasedEmails: [],
   duplicateEmails: [],
   invalidEmails: [],

src/components/PeopleManagement/data/reducer.ts

@@ -21,9 +21,19 @@ export type ValidatedEmailsReducerType = (
 const allEmails = (state: ValidatedEmailsContext) => {
   // Return all emails from the context regardless of error status
   const {
-    lowerCasedEmails, duplicateEmails, invalidEmails,
+    validatedEmails, duplicateEmails, invalidEmails,
   } = state;
-  return [lowerCasedEmails, duplicateEmails, invalidEmails].flatMap((list) => list || []);
+  return [validatedEmails, duplicateEmails, invalidEmails].flatMap((list) => list || []);
+};
+
+const removeEmailsFromState = (
+  state: ValidatedEmailsContext,
+  removedValidatedEmails: string[],
+): ValidatedEmailsContext => {
+  const validatedEmails = removeStringsFromList(state.validatedEmails as string[], removedValidatedEmails);
+  const lowerCasedEmailsToRemove = removedValidatedEmails.map((str) => str.toLowerCase());
+  const lowerCasedEmails = removeStringsFromList(state.lowerCasedEmails as string[], lowerCasedEmailsToRemove);
+  return { ...state, validatedEmails, lowerCasedEmails };
 };
 
 const getUpdatedEmailsAndState = (
@@ -36,7 +46,7 @@ const getUpdatedEmailsAndState = (
     const newState = {
       ...state, duplicateEmails: [], invalidEmails: [],
     };
-    return [newState, [...(newState.lowerCasedEmails || []), ...addedEmails]];
+    return [newState, [...(newState.validatedEmails || []), ...addedEmails]];
   }
 
   return [state, [...allEmails(state), ...addedEmails]];
@@ -69,10 +79,7 @@ export const ValidatedEmailsReducer: ValidatedEmailsReducerType = (
       return { ...newState, ...emailValidation };
     } case REMOVE_EMAILS: {
       const { emails: removedEmails } = action.arguments as RemoveEmailsArguments;
-      const newState = { ...state };
-      const emails = newState.lowerCasedEmails as string[];
-      newState.lowerCasedEmails = removeStringsFromList(emails, removedEmails);
-      return { ...newState };
+      return removeEmailsFromState(state, removedEmails);
     } default: {
       logError(`Unexpected action: ${action?.type}`);
       return state;

src/components/PeopleManagement/tests/CreateGroupModal.test.jsx

@@ -98,8 +98,8 @@ const mockTabledata = {
     {
       enterpriseCustomerUser: {
         userId: 4,
-        name: 'Test User 4',
-        email: 'testuser-4@2u.com',
+        name: 'Non-lowercased User Email',
+        email: 'testUser-NonLowercase@2u.com',
         joinedOrg: 'July 4, 2024',
       },
     },
@@ -415,4 +415,32 @@ describe('<CreateGroupModal />', () => {
     });
     expect(screen.queryByText('Only 1 invite per email address will be sent.')).not.toBeInTheDocument();
   });
+  it('can add/remove members with non-lowercased emails', async () => {
+    const mockGroupData = { uuid: 'test-uuid' };
+    LmsApiService.createEnterpriseGroup.mockResolvedValue({ status: 201, data: mockGroupData });
+
+    const mockInviteData = { records_processed: 1, new_learners: 1, existing_learners: 0 };
+    LmsApiService.inviteEnterpriseLearnersToGroup.mockResolvedValue(mockInviteData);
+
+    render(<CreateGroupModalWrapper />);
+    const groupNameInput = screen.getByTestId('group-name');
+    userEvent.type(groupNameInput, 'test group name');
+
+    // Add non-lowercased member
+    const membersCheckbox = screen.getAllByTitle('Toggle Row Selected');
+    userEvent.click(membersCheckbox[3]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Summary (1)')).toBeInTheDocument();
+      expect(screen.getAllByText('[email protected]')).toHaveLength(2);
+    }, { timeout: EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY + 1000 });
+
+    // Remove non-lowercased member
+    userEvent.click(membersCheckbox[3]);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Summary (1)')).not.toBeInTheDocument();
+      expect(screen.getAllByText('[email protected]')).toHaveLength(1);
+    }, { timeout: EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY + 1000 });
+  });
 });

src/components/learner-credit-management/cards/data/utils.ts

@@ -118,6 +118,8 @@ export type LearnerEmailsValidityReport = {
   canInvite: boolean,
   /* If there are no invalid emails and the count of emails is under the limit */
   isValidInput: boolean,
+  /* List of valid emails in their original casing */
+  validatedEmails: string[],
   /* List of valid lower-cased emails */
   lowerCasedEmails: string[],
   /* List of duplicate emails */
@@ -143,6 +145,7 @@ export const isInviteEmailAddressesInputValueValid = ({
 }: LearnerEmailsValidityArgs): LearnerEmailsValidityReport => {
   let validationError;
   const learnerEmailsCount = learnerEmails.length;
+  const lowerCasedEmails: string[] = [];
   const validatedEmails: string[] = [];
   const invalidEmails: string[] = [];
   const duplicateEmails: string[] = [];
@@ -153,12 +156,13 @@ export const isInviteEmailAddressesInputValueValid = ({
     // Validate the email address
     if (!isEmail(email)) {
       invalidEmails.push(email);
-    } else if (validatedEmails.includes(lowerCasedEmail)) {
+    } else if (lowerCasedEmails.includes(lowerCasedEmail)) {
       // Check for duplicates (case-insensitive)
       duplicateEmails.push(email);
     } else {
-      // Add to list of lower-cased emails already handled
-      validatedEmails.push(lowerCasedEmail);
+      // Add to list of emailss already handled
+      lowerCasedEmails.push(lowerCasedEmail);
+      validatedEmails.push(email);
     }
   });
 
@@ -199,7 +203,8 @@ export const isInviteEmailAddressesInputValueValid = ({
 
   return {
     canInvite,
-    lowerCasedEmails: validatedEmails,
+    lowerCasedEmails,
+    validatedEmails,
     duplicateEmails,
     invalidEmails,
     isValidInput,