fix: create group support multiple csv files (#1419)

test: create group remove and re-add user from csv file

Author: marlonkeating

src/components/PeopleManagement/CreateGroupModalContent.jsx

@@ -1,8 +1,8 @@
 import React, {
-  useCallback, useEffect, useMemo, useState,
+  useCallback, useEffect, useState,
 } from 'react';
 import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
+import _ from 'lodash';
 import {
   Col, Container, Form, Hyperlink, Row,
 } from '@openedx/paragon';
@@ -11,10 +11,11 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import InviteModalSummary from '../learner-credit-management/invite-modal/InviteModalSummary';
 import InviteSummaryCount from '../learner-credit-management/invite-modal/InviteSummaryCount';
 import FileUpload from '../learner-credit-management/invite-modal/FileUpload';
-import { EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY, isInviteEmailAddressesInputValueValid } from '../learner-credit-management/cards/data';
+import { isInviteEmailAddressesInputValueValid } from '../learner-credit-management/cards/data';
 import { HELP_CENTER_URL, MAX_LENGTH_GROUP_NAME } from './constants';
 import EnterpriseCustomerUserDataTable from './EnterpriseCustomerUserDataTable';
 import { useEnterpriseLearners } from '../learner-credit-management/data';
+import { splitAndTrim } from '../../utils';
 
 const CreateGroupModalContent = ({
   enterpriseUUID,
@@ -25,7 +26,6 @@ const CreateGroupModalContent = ({
   setIsCreateGroupListSelection,
 }) => {
   const [learnerEmails, setLearnerEmails] = useState([]);
-  const [emailAddressesInputValue, setEmailAddressesInputValue] = useState('');
   const [memberInviteMetadata, setMemberInviteMetadata] = useState({
     isValidInput: null,
     lowerCasedEmails: [],
@@ -69,25 +69,12 @@ const CreateGroupModalContent = ({
     setLearnerEmails(prev => prev.filter((el) => !value.includes(el)));
   }, [onEmailAddressesChange]);
 
-  const handleEmailAddressesChanged = useCallback((value) => {
-    if (!value) {
-      setLearnerEmails([]);
-      onEmailAddressesChange([]);
-      return;
-    }
-    // handles csv upload value and formats emails into an array of strings
-    const emails = value.split('\n').map((email) => email.trim()).filter((email) => email.length > 0);
-    setLearnerEmails(emails);
-  }, [onEmailAddressesChange]);
-
-  const debouncedHandleEmailAddressesChanged = useMemo(
-    () => debounce(handleEmailAddressesChanged, EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY),
-    [handleEmailAddressesChanged],
-  );
-
-  useEffect(() => {
-    debouncedHandleEmailAddressesChanged(emailAddressesInputValue);
-  }, [emailAddressesInputValue, debouncedHandleEmailAddressesChanged]);
+  const handleCsvUpload = useCallback((emails) => {
+    // Merge new emails with old emails (removing duplicates)
+    const allEmails = _.union(learnerEmails, splitAndTrim('\n', emails));
+    setLearnerEmails(allEmails);
+    setIsCreateGroupFileUpload(true);
+  }, [learnerEmails, setIsCreateGroupFileUpload]);
 
   // Validate the learner emails emails from user input whenever it changes
   useEffect(() => {
@@ -151,7 +138,7 @@ const CreateGroupModalContent = ({
           </p>
           <FileUpload
             memberInviteMetadata={memberInviteMetadata}
-            setEmailAddressesInputValue={setEmailAddressesInputValue}
+            setEmailAddressesInputValue={handleCsvUpload}
             setIsCreateGroupFileUpload={setIsCreateGroupFileUpload}
           />
         </Col>

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

@@ -129,6 +129,7 @@ const CreateGroupModalWrapper = ({
 
 describe('<CreateGroupModal />', () => {
   beforeEach(() => {
+    jest.clearAllMocks();
     useEnterpriseMembersTableData.mockReturnValue({
       isLoading: false,
       enterpriseMembersTableData: mockTabledata,
@@ -299,6 +300,54 @@ describe('<CreateGroupModal />', () => {
     });
     expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['learner-credit-management', 'group', '1234'] });
   });
+  it('removes and re-adds user from csv file', 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 fakeFile = new File(['[email protected]\[email protected]'], 'emails.csv', { type: 'text/csv' });
+    const dropzone = screen.getByText('Drag and drop your file here or click to upload.');
+    Object.defineProperty(dropzone, 'files', {
+      value: [fakeFile],
+      writable: true,
+    });
+    fireEvent.drop(dropzone);
+
+    await waitFor(() => {
+      expect(screen.getByText('Summary (2)')).toBeInTheDocument();
+    }, { timeout: EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY + 1000 });
+
+    // testing interaction with removing members from the datatable
+    const membersCheckboxes = screen.getAllByRole('checkbox');
+    // skipping first one because it's the select all checkbox
+    userEvent.click(membersCheckboxes[1]);
+    const removeMembersButton = screen.getByText('Remove');
+    userEvent.click(removeMembersButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Summary (1)')).toBeInTheDocument();
+      expect(screen.getAllByText('[email protected]')).toHaveLength(1);
+      expect(screen.getAllByText('[email protected]')).toHaveLength(2);
+    }, { timeout: EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY + 1000 });
+
+    const dropzone2 = screen.getByText('emails.csv');
+    Object.defineProperty(dropzone2, 'files', {
+      value: [fakeFile],
+    });
+    fireEvent.drop(dropzone2);
+
+    const groupNameInput = screen.getByTestId('group-name');
+    userEvent.type(groupNameInput, 'test group name');
+
+    await waitFor(() => {
+      expect(screen.getByText('Summary (2)')).toBeInTheDocument();
+      expect(screen.getAllByText('[email protected]')).toHaveLength(2);
+      expect(screen.getAllByText('[email protected]')).toHaveLength(2);
+    }, { timeout: EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY + 1000 });
+  });
   it('displays error for email not belonging in an org', async () => {
     const mockGroupData = { uuid: 'test-uuid' };
     LmsApiService.createEnterpriseGroup.mockResolvedValue({ status: 201, data: mockGroupData });

src/utils.js

@@ -655,6 +655,13 @@ function downloadCsv(fileName, data, headers, dataEntryToRow) {
   saveAs(blob, fileName);
 }
 
+/**
+ * Split a string by given separator, and return array of trimmed, non-blank string entries
+ */
+function splitAndTrim(separator, str) {
+  return str.split(separator).map((subStr) => subStr.trim()).filter((subStr) => subStr.length > 0);
+}
+
 export {
   camelCaseDict,
   camelCaseDictArray,
@@ -704,4 +711,5 @@ export {
   isFalsy,
   getTimeStampedFilename,
   downloadCsv,
+  splitAndTrim,
 };

src/utils.test.js

@@ -16,6 +16,7 @@ import {
   i18nFormatProgressStatus,
   getTimeStampedFilename,
   downloadCsv,
+  splitAndTrim,
 } from './utils';
 
 jest.mock('@edx/frontend-platform/logging', () => ({
@@ -211,4 +212,10 @@ describe('utils', () => {
       expect(saveAs).toHaveBeenCalledWith({}, fileName);
     });
   });
+  describe('splitAndTrim', () => {
+    it('returns split and trimmed string array', () => {
+      const csvStr = 'a,b,,c ,';
+      expect(splitAndTrim(',', csvStr)).toEqual(['a', 'b', 'c']);
+    });
+  });
 });