feat: updates groups page to show only flex groups for customer (#1384)

src/components/PeopleManagement/index.jsx

@@ -15,7 +15,7 @@ import Hero from '../Hero';
 import { SUBSIDY_TYPES } from '../../data/constants/subsidyTypes';
 import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
 import CreateGroupModal from './CreateGroupModal';
-import { useAllEnterpriseGroups } from '../learner-credit-management/data';
+import { useAllFlexEnterpriseGroups } from '../learner-credit-management/data';
 import ZeroState from './ZeroState';
 import GroupCardGrid from './GroupCardGrid';
 import PeopleManagementTable from './PeopleManagementTable';
@@ -29,7 +29,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
   });
 
   const { enterpriseSubsidyTypes } = useContext(EnterpriseSubsidiesContext);
-  const { data, isLoading: isGroupsLoading } = useAllEnterpriseGroups(enterpriseId);
+  const { data, isLoading: isGroupsLoading } = useAllFlexEnterpriseGroups(enterpriseId);
 
   const hasLearnerCredit = enterpriseSubsidyTypes.includes(SUBSIDY_TYPES.budget);
   const hasOtherSubsidyTypes = enterpriseSubsidyTypes.includes(SUBSIDY_TYPES.license)

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

@@ -7,7 +7,7 @@ import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { useAllEnterpriseGroups } from '../../learner-credit-management/data';
+import { useAllFlexEnterpriseGroups } from '../../learner-credit-management/data';
 import { EnterpriseSubsidiesContext } from '../../EnterpriseSubsidiesContext';
 import PeopleManagementPage from '..';
 
@@ -40,7 +40,7 @@ jest.mock('@tanstack/react-query', () => ({
 
 jest.mock('../../learner-credit-management/data', () => ({
   ...jest.requireActual('../../learner-credit-management/data'),
-  useAllEnterpriseGroups: jest.fn(),
+  useAllFlexEnterpriseGroups: jest.fn(),
 }));
 
 const mockGroupsResponse = [{
@@ -89,7 +89,7 @@ const PeopleManagementPageWrapper = ({
 
 describe('<PeopleManagementPage >', () => {
   it('renders the PeopleManagementPage zero state', () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: { results: {} } });
+    useAllFlexEnterpriseGroups.mockReturnValue({ data: { results: {} } });
     render(<PeopleManagementPageWrapper />);
     expect(document.querySelector('h3').textContent).toEqual("Your organization's groups");
     expect(screen.getByText("You don't have any groups yet.")).toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('<PeopleManagementPage >', () => {
     )).toBeInTheDocument();
   });
   it('renders the PeopleManagementPage zero state without LC', () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: { results: [] } });
+    useAllFlexEnterpriseGroups.mockReturnValue({ data: { results: [] } });
     const store = getMockStore(initialStoreState);
     render(
       <IntlProvider locale="en">
@@ -116,7 +116,7 @@ describe('<PeopleManagementPage >', () => {
     expect(screen.getByText("Once a group is created, you can track members' progress.")).toBeInTheDocument();
   });
   it('renders the PeopleManagementPage group card grid', () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: mockGroupsResponse });
+    useAllFlexEnterpriseGroups.mockReturnValue({ data: mockGroupsResponse });
     const store = getMockStore(initialStoreState);
     render(
       <IntlProvider locale="en">
@@ -131,7 +131,7 @@ describe('<PeopleManagementPage >', () => {
     expect(screen.getByText('4 members')).toBeInTheDocument();
   });
   it('renders the PeopleManagementPage group card grid with collapsible', async () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: mockMultipleGroupsResponse });
+    useAllFlexEnterpriseGroups.mockReturnValue({ data: mockMultipleGroupsResponse });
     const store = getMockStore(initialStoreState);
     render(
       <IntlProvider locale="en">

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

@@ -17,7 +17,7 @@ export { default as useEnterpriseGroupLearners } from './useEnterpriseGroupLearn
 export { default as useEnterpriseGroupMembersTableData } from './useEnterpriseGroupMembersTableData';
 export { default as useEnterpriseCustomer } from './useEnterpriseCustomer';
 export { default as useEnterpriseGroup } from './useEnterpriseGroup';
-export { default as useAllEnterpriseGroups } from './useAllEnterpriseGroups';
+export { default as useAllFlexEnterpriseGroups } from './useAllFlexEnterpriseGroups';
 export { default as useContentMetadata } from './useContentMetadata';
 export { default as useEnterpriseRemovedGroupMembers } from './useEnterpriseRemovedGroupMembers';
 export { default as useEnterpriseFlexGroups } from './useEnterpriseFlexGroups';

src/components/learner-credit-management/data/hooks/useAllEnterpriseGroups.js → src/components/learner-credit-management/data/hooks/useAllFlexEnterpriseGroups.js

@@ -10,15 +10,16 @@ import { fetchPaginatedData } from '../../../../data/services/apiServiceUtils';
  * @param {*} queryKey The queryKey from the associated `useQuery` call.
  * @returns The enterprise group object
  */
-const getAllEnterpriseGroups = async ({ enterpriseId }) => {
-  const { results } = await fetchPaginatedData(`${LmsApiService.enterpriseGroupListUrl}?enterprise_uuids${enterpriseId}?group_type=flex`);
-  return results;
+const getAllFlexEnterpriseGroups = async ({ enterpriseId }) => {
+  const { results } = await fetchPaginatedData(`${LmsApiService.enterpriseGroupListUrl}?enterprise_uuids=${enterpriseId}`);
+  const flexGroups = results.filter(result => result.groupType === 'flex');
+  return flexGroups;
 };
 
-const useAllEnterpriseGroups = (enterpriseId, { queryOptions } = {}) => useQuery({
+const useAllFlexEnterpriseGroups = (enterpriseId, { queryOptions } = {}) => useQuery({
   queryKey: learnerCreditManagementQueryKeys.group(enterpriseId),
-  queryFn: () => getAllEnterpriseGroups({ enterpriseId }),
+  queryFn: () => getAllFlexEnterpriseGroups({ enterpriseId }),
   ...queryOptions,
 });
 
-export default useAllEnterpriseGroups;
+export default useAllFlexEnterpriseGroups;