feat: add coverage and fixed syntax

src/components/PeopleManagement/constants.js

@@ -2,3 +2,4 @@ export const MAX_LENGTH_GROUP_NAME = 60;
 
 export const GROUP_TYPE_BUDGET = 'budget';
 export const GROUP_TYPE_FLEX = 'flex';
+export const GROUP_DROPDOWN_TEXT = 'Select group';

src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx

@@ -18,10 +18,18 @@ import AssignmentAllocationHelpCollapsibles from './AssignmentAllocationHelpColl
 import EVENT_NAMES from '../../../eventTracking';
 import AssignmentModalFlexGroup from './AssignmentModalFlexGroup';
 import useGroupDropdownToggle from '../data/hooks/useGroupDropdownToggle';
+import { GROUP_DROPDOWN_TEXT } from '../../PeopleManagement/constants';
 
 const AssignmentModalContent = ({
-  enterpriseId, course, courseRun, onEmailAddressesChange, enterpriseFlexGroups, onGroupSelectionsChanged,
+  enterpriseId,
+  course,
+  courseRun,
+  onEmailAddressesChange,
+  enterpriseFlexGroups,
+  onGroupSelectionsChanged,
+  enterpriseFeatures,
 }) => {
+  const shouldShowGroupsDropdown = enterpriseFeatures.enterpriseGroupsV2 && enterpriseFlexGroups?.length > 0;
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
   const spendAvailable = subsidyAccessPolicy.aggregates.spendAvailableUsd;
@@ -32,7 +40,7 @@ const AssignmentModalContent = ({
   const { contentPrice } = courseRun;
   const [groupMemberEmails, setGroupMemberEmails] = useState([]);
   const [checkedGroups, setCheckedGroups] = useState({});
-  const [dropdownToggleLabel, setDropdownToggleLabel] = useState('Select group');
+  const [dropdownToggleLabel, setDropdownToggleLabel] = useState(GROUP_DROPDOWN_TEXT);
   const {
     dropdownRef,
     handleCheckedGroupsChanged,
@@ -77,7 +85,7 @@ const AssignmentModalContent = ({
     } else if (selectedGroups.length > 1) {
       setDropdownToggleLabel(`${selectedGroups.length} groups selected`);
     } else {
-      setDropdownToggleLabel('Select group');
+      setDropdownToggleLabel(GROUP_DROPDOWN_TEXT);
     }
   }, [checkedGroups, handleGroupsChanged]);
 
@@ -137,7 +145,7 @@ const AssignmentModalContent = ({
                 description="Header for the section where we assign a course to learners"
               />
             </h4>
-            {enterpriseFlexGroups.length > 0 && (
+            {shouldShowGroupsDropdown && (
               <AssignmentModalFlexGroup
                 checkedGroups={checkedGroups}
                 dropdownRef={dropdownRef}
@@ -265,10 +273,14 @@ AssignmentModalContent.propTypes = {
     uuid: PropTypes.string,
     acceptedMembersCount: PropTypes.number,
   })),
+  enterpriseFeatures: PropTypes.shape({
+    enterpriseGroupsV2: PropTypes.bool.isRequired,
+  }),
 };
 
 const mapStateToProps = state => ({
   enterpriseId: state.portalConfiguration.enterpriseId,
+  enterpriseFeatures: state.portalConfiguration.enterpriseFeatures,
 });
 
 export default connect(mapStateToProps)(AssignmentModalContent);

src/components/learner-credit-management/cards/tests/CourseCard.test.jsx

@@ -172,6 +172,9 @@ const initialStoreState = {
   portalConfiguration: {
     enterpriseId: enterpriseUUID,
     enterpriseSlug,
+    enterpriseFeatures: {
+      enterpriseGroupsV2: true,
+    },
   },
 };
 

src/components/learner-credit-management/data/hooks/tests/useEnterpriseFlexGroups.test.jsx

@@ -5,6 +5,7 @@ import { camelCaseObject } from '@edx/frontend-platform';
 
 import { fetchPaginatedData } from '../../../../../data/services/apiServiceUtils';
 import LmsApiService from '../../../../../data/services/LmsApiService';
+import { getGroupMemberEmails } from '../useEnterpriseFlexGroups';
 
 const axiosMock = new MockAdapter(axios);
 jest.mock('../../../../../data/services/apiServiceUtils');
@@ -82,8 +83,6 @@ describe('useEnterpriseFlexGroups', () => {
 });
 
 describe('getGroupMemberEmails', () => {
-  const enterpriseGroupLearnerUrl = `${LmsApiService.enterpriseGroupUrl}${mockGroupUuid}/learners`;
-
   beforeEach(() => {
     jest.clearAllMocks();
     fetchPaginatedData.mockReturnValue(
@@ -92,12 +91,10 @@ describe('getGroupMemberEmails', () => {
         response: camelCaseObject(mockLearners),
       },
     );
-    axiosMock.reset();
   });
 
-  it('returns the api call with a 200', async () => {
-    axiosMock.onGet(enterpriseGroupLearnerUrl).reply(200, mockLearners);
-    const { results } = await fetchPaginatedData(mockGroupUuid);
-    expect(results).toEqual(camelCaseObject(mockLearners.results));
+  it('returns the member emails', async () => {
+    const groupMemberEmails = await getGroupMemberEmails(mockGroupUuid);
+    expect(groupMemberEmails).toEqual([camelCaseObject(mockLearners).results[0].memberDetails.userEmail]);
   });
 });

src/components/learner-credit-management/data/hooks/useEnterpriseFlexGroups.js

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { learnerCreditManagementQueryKeys } from '../constants';
 import { fetchPaginatedData } from '../../../../data/services/apiServiceUtils';
 import LmsApiService from '../../../../data/services/LmsApiService';
+import { GROUP_TYPE_FLEX } from '../../../PeopleManagement/constants';
 
 export const getGroupMemberEmails = async (groupUUID) => {
   const url = `${LmsApiService.enterpriseGroupUrl}${groupUUID}/learners`;
@@ -17,16 +18,16 @@ export const getGroupMemberEmails = async (groupUUID) => {
  * @param enterpriseId The enterprise customer UUID.
  * @returns A list of flex groups associated with an enterprise customer.
  */
-export const getEnterpriseFlexGroups = async ({ queryKey }) => {
-  const enterpriseId = queryKey[2];
+export const getEnterpriseFlexGroups = async ({ enterpriseId }) => {
   const { results } = await fetchPaginatedData(LmsApiService.enterpriseGroupListUrl);
-  const flexGroups = results.filter(result => result.enterpriseCustomer === enterpriseId && result.groupType === 'flex');
+  const flexGroups = results.filter(result => (
+    result.enterpriseCustomer === enterpriseId && result.groupType === GROUP_TYPE_FLEX));
   return flexGroups;
 };
 
 const useEnterpriseFlexGroups = (enterpriseId, { queryOptions } = {}) => useQuery({
   queryKey: learnerCreditManagementQueryKeys.flexGroup(enterpriseId),
-  queryFn: getEnterpriseFlexGroups,
+  queryFn: () => getEnterpriseFlexGroups({ enterpriseId }),
   ...queryOptions,
 });
 

src/components/learner-credit-management/data/hooks/useGroupDropdownToggle.js

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useEffect } from 'react';
 import { logError } from '@edx/frontend-platform/logging';
 import { getGroupMemberEmails } from './useEnterpriseFlexGroups';
+import { GROUP_DROPDOWN_TEXT } from '../../../PeopleManagement/constants';
 
 const useGroupDropdownToggle = ({
   setCheckedGroups,
@@ -44,7 +45,7 @@ const useGroupDropdownToggle = ({
     // Handles user clicking outside of the dropdown menu.
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setDropdownToggleLabel('Select group');
+        setDropdownToggleLabel(GROUP_DROPDOWN_TEXT);
         Object.keys(checkedGroups).forEach(group => {
           // If the user has checked the boxes but has not applied the selections,
           // we clear the selection when the user closes the menu.