Merge pull request #1665 from openedx/maham/ENT-10833

[ENT-10833] Add budget filtering for Analytics V2

Author: mahamakifdar19

src/components/AdvanceAnalyticsV2.0/AnalyticsFilters.jsx

@@ -32,9 +32,13 @@ const AnalyticsFilters = ({
   groups,
   isFetching,
   isGroupsLoading,
+  budgets,
+  isBudgetsFetching,
   activeTab,
   isEnterpriseCoursesFetching,
   enterpriseCourses,
+  budgetUUID,
+  setBudgetUUID,
 
 }) => {
   const intl = useIntl();
@@ -297,7 +301,7 @@ const AnalyticsFilters = ({
                   as="select"
                   value={groupUUID}
                   onChange={(e) => setGroupUUID(e.target.value)}
-                  disabled={isGroupsLoading || groups === undefined || groups.length === 0}
+                  disabled={isGroupsLoading}
                 >
                   <option value={DEFAULT_GROUP}>
                     {intl.formatMessage({
@@ -307,8 +311,8 @@ const AnalyticsFilters = ({
                     })}
                   </option>
                   {groups?.map(grp => (
-                    <option value={grp.uuid} key={grp.uuid}>
-                      {grp.name}
+                    <option value={grp?.uuid} key={grp?.uuid}>
+                      {grp?.name}
                     </option>
                   ))}
                 </Form.Control>
@@ -322,16 +326,31 @@ const AnalyticsFilters = ({
                     <FormattedMessage
                       id="advance.analytics.filter.by.budget"
                       defaultMessage="Filter by budget"
-                      description="Advance analytics filter by budget label"
+                      description="Advance analytics budget filter label"
                     />
                   </Form.Label>
                   <Form.Control
                     controlClassName="font-weight-normal analytics-filter-form-controls rounded-0"
                     as="select"
-                    disabled
-                    value=""
+                    value={budgetUUID}
+                    onChange={(e) => setBudgetUUID(e.target.value)}
+                    disabled={isBudgetsFetching}
                   >
-                    <option value="">All budgets</option>
+                    <option value="">
+                      {intl.formatMessage({
+                        id: 'adminPortal.analytics.budget.filter.all',
+                        defaultMessage: 'All budgets',
+                        description: 'Label for the all budgets option',
+                      })}
+                    </option>
+                    {budgets?.map(budget => (
+                      <option
+                        key={budget?.subsidyAccessPolicyUuid}
+                        value={budget?.subsidyAccessPolicyUuid}
+                      >
+                        {budget?.subsidyAccessPolicyDisplayName}
+                      </option>
+                    ))}
                   </Form.Control>
                 </Form.Group>
               </div>
@@ -458,6 +477,10 @@ AnalyticsFilters.propTypes = {
   activeTab: PropTypes.string.isRequired,
   isEnterpriseCoursesFetching: PropTypes.bool,
   enterpriseCourses: PropTypes.arrayOf(PropTypes.shape({ })),
+  budgets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  isBudgetsFetching: PropTypes.bool.isRequired,
+  budgetUUID: PropTypes.string,
+  setBudgetUUID: PropTypes.func.isRequired,
 };
 
 export default AnalyticsFilters;

src/components/AdvanceAnalyticsV2.0/data/hooks.test.jsx

@@ -203,6 +203,52 @@ describe('useEnterpriseAnalyticsData', () => {
       },
     );
   });
+  it('includes budgetUUID in API request when provided', async () => {
+    const startDate = '2021-01-01';
+    const endDate = '2021-12-31';
+    const budgetUUID = 'budget-1234';
+    const courseType = COURSE_TYPES.ALL_COURSE_TYPES;
+    const course = ALL_COURSES;
+
+    const requestOptions = {
+      startDate,
+      endDate,
+      budgetUUID,
+    };
+
+    const queryParams = new URLSearchParams(snakeCaseObject(requestOptions));
+    const baseURL = `${EnterpriseDataApiService.enterpriseAdminAnalyticsV2BaseUrl}${TEST_ENTERPRISE_ID}`;
+    const analyticsURL = `${baseURL}/completions/stats?${queryParams.toString()}`;
+
+    axiosMock.onGet(analyticsURL).reply(200, mockAnalyticsCompletionsChartsData);
+
+    const { result } = renderHook(
+      () => useEnterpriseAnalyticsData({
+        enterpriseCustomerUUID: TEST_ENTERPRISE_ID,
+        key: 'completions',
+        startDate,
+        endDate,
+        courseType,
+        course,
+        budgetUUID,
+      }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isFetching).toBe(false);
+    });
+
+    expect(EnterpriseDataApiService.fetchAdminAnalyticsData).toHaveBeenCalledWith(
+      TEST_ENTERPRISE_ID,
+      'completions',
+      {
+        startDate,
+        endDate,
+        budgetUUID,
+      },
+    );
+  });
 });
 
 describe('useEnterpriseAnalyticsAggregatesData', () => {
@@ -303,6 +349,42 @@ describe('useEnterpriseAnalyticsAggregatesData', () => {
       expect(result.current.isFetching).toBe(false);
     });
 
+    expect(EnterpriseDataApiService.fetchAdminAggregatesData).toHaveBeenCalledWith(
+      TEST_ENTERPRISE_ID,
+      requestOptions,
+    );
+  });
+  it('includes budgetUUID in aggregates API request when provided', async () => {
+    const startDate = '2021-01-01';
+    const endDate = '2021-12-31';
+    const budgetUUID = 'budget-9876';
+
+    const requestOptions = {
+      startDate,
+      endDate,
+      budgetUUID,
+    };
+
+    const queryParams = new URLSearchParams(snakeCaseObject(requestOptions));
+    const baseURL = `${EnterpriseDataApiService.enterpriseAdminAnalyticsV2BaseUrl}${TEST_ENTERPRISE_ID}`;
+    const analyticsURL = `${baseURL}/aggregates/stats?${queryParams.toString()}`;
+
+    axiosMock.onGet(analyticsURL).reply(200, {});
+
+    const { result } = renderHook(
+      () => useEnterpriseAnalyticsAggregatesData({
+        enterpriseCustomerUUID: TEST_ENTERPRISE_ID,
+        startDate,
+        endDate,
+        budgetUUID,
+      }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isFetching).toBe(false);
+    });
+
     expect(EnterpriseDataApiService.fetchAdminAggregatesData).toHaveBeenCalledWith(
       TEST_ENTERPRISE_ID,
       requestOptions,

src/components/AdvanceAnalyticsV2.0/data/hooks/index.js

@@ -9,6 +9,7 @@ export { default as useEnterpriseEnrollmentsData } from './useEnterpriseEnrollme
 export { default as useEnterpriseEngagementData } from './useEnterpriseEngagementData';
 export { default as useEnterpriseCompletionsData } from './useEnterpriseCompletionsData';
 export { default as useEnterpriseCourses } from './useEnterpriseCourses';
+export { default as useEnterpriseBudgets } from './useEnterpriseBudgets';
 
 export const useEnterpriseAnalyticsData = ({
   enterpriseCustomerUUID,
@@ -22,6 +23,7 @@ export const useEnterpriseAnalyticsData = ({
   pageSize = undefined,
   courseType = undefined,
   course = undefined,
+  budgetUUID = undefined,
   queryOptions = {},
 }) => {
   const requestOptions = {
@@ -42,6 +44,10 @@ export const useEnterpriseAnalyticsData = ({
     requestOptions.courseKey = course.value;
   }
 
+  if (budgetUUID) {
+    requestOptions.budgetUUID = budgetUUID;
+  }
+
   return useQuery({
     queryKey: advanceAnalyticsQueryKeys[key](enterpriseCustomerUUID, requestOptions),
     queryFn: () => EnterpriseDataApiService.fetchAdminAnalyticsData(
@@ -79,6 +85,7 @@ export const useEnterpriseAnalyticsAggregatesData = ({
   endDate,
   courseType = undefined,
   course = undefined,
+  budgetUUID = undefined,
   queryOptions = {},
 }) => {
   const requestOptions = {
@@ -94,6 +101,10 @@ export const useEnterpriseAnalyticsAggregatesData = ({
     requestOptions.courseKey = course.value;
   }
 
+  if (budgetUUID) {
+    requestOptions.budgetUUID = budgetUUID;
+  }
+
   return useQuery({
     queryKey: advanceAnalyticsQueryKeys.aggregates(enterpriseCustomerUUID, requestOptions),
     queryFn: () => EnterpriseDataApiService.fetchAdminAggregatesData(

src/components/AdvanceAnalyticsV2.0/data/hooks/useEnterpriseBudgets.js

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { generateKey } from '../constants';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+/**
+ * Fetches enterprise budgets.
+ *
+ * @param {String} enterpriseCustomerUUID - UUID of the enterprise customer.
+ * @param {object} queryOptions - Additional options for the query.
+ */
+const useEnterpriseBudgets = ({
+  enterpriseCustomerUUID,
+  queryOptions = {},
+}) => {
+  const requestOptions = { };
+  const response = useQuery({
+    queryKey: generateKey('budgets', enterpriseCustomerUUID, requestOptions),
+    queryFn: () => EnterpriseDataApiService.fetchEnterpriseBudgets(enterpriseCustomerUUID),
+    staleTime: 0.5 * (1000 * 60 * 60), // 30 minutes. Data considered stale after this duration
+    cacheTime: 0.75 * (1000 * 60 * 60), // 45 minutes. Cache GC after this duration
+    keepPreviousData: true,
+    ...queryOptions,
+  });
+
+  return useMemo(() => camelCaseObject({
+    data: response?.data?.data,
+    isFetching: false,
+  }), [response]);
+};
+
+export default useEnterpriseBudgets;

src/components/AdvanceAnalyticsV2.0/data/hooks/useEnterpriseBudgets.test.js

@@ -0,0 +1,76 @@
+import { renderHook } from '@testing-library/react';
+import { useQuery } from '@tanstack/react-query';
+import useEnterpriseBudgets from './useEnterpriseBudgets';
+import { generateKey } from '../constants';
+
+jest.mock('../../../../data/services/EnterpriseDataApiService', () => ({
+  fetchEnterpriseBudgets: jest.fn(),
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(),
+}));
+
+jest.mock('../constants', () => ({
+  generateKey: jest.fn(),
+}));
+
+describe('useEnterpriseBudgets', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const enterpriseCustomerUUID = 'enterprise-456';
+
+  it('calls useQuery with correct parameters', () => {
+    const mockData = {
+      data: [
+        { subsidyAccessPolicyUuid: 'budget-uuid-1', subsidyAccessPolicyDisplayName: 'Budget 1' },
+        { subsidyAccessPolicyUuid: 'budget-uuid-2', subsidyAccessPolicyDisplayName: 'Budget 2' },
+      ],
+    };
+    useQuery.mockReturnValue({ data: mockData });
+    generateKey.mockReturnValue(['budgets', enterpriseCustomerUUID]);
+
+    const { result } = renderHook(() => useEnterpriseBudgets({
+      enterpriseCustomerUUID,
+    }));
+
+    expect(useQuery).toHaveBeenCalledWith(expect.objectContaining({
+      queryKey: ['budgets', enterpriseCustomerUUID],
+      queryFn: expect.any(Function),
+      staleTime: expect.any(Number),
+      cacheTime: expect.any(Number),
+      keepPreviousData: true,
+    }));
+
+    expect(result.current.data).toEqual(mockData.data);
+    expect(result.current.isFetching).toBe(false);
+  });
+
+  it('returns empty data when API response is undefined', () => {
+    useQuery.mockReturnValue({ data: undefined });
+    generateKey.mockReturnValue(['budgets', enterpriseCustomerUUID]);
+
+    const { result } = renderHook(() => useEnterpriseBudgets({
+      enterpriseCustomerUUID,
+    }));
+
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.isFetching).toBe(false);
+  });
+
+  it('uses queryOptions passed into the hook', () => {
+    const mockOptions = { enabled: false };
+    generateKey.mockReturnValue(['budgets', enterpriseCustomerUUID]);
+
+    renderHook(() => useEnterpriseBudgets({
+      enterpriseCustomerUUID,
+      queryOptions: mockOptions,
+    }));
+
+    expect(useQuery).toHaveBeenCalledWith(expect.objectContaining({
+      ...mockOptions,
+    }));
+  });
+});

src/components/AdvanceAnalyticsV2.0/data/hooks/useEnterpriseCompletionsData.test.jsx renamed to src/components/AdvanceAnalyticsV2.0/data/hooks/useEnterpriseCompletionsData.test.js

@@ -33,6 +33,7 @@ const useEnterpriseCourses = ({
   endDate,
   groupUUID = undefined,
   courseType = undefined,
+  budgetUUID = undefined,
   queryOptions = {},
 }) => {
   const requestOptions = {
@@ -45,6 +46,10 @@ const useEnterpriseCourses = ({
     requestOptions.courseType = courseType;
   }
 
+  if (budgetUUID) {
+    requestOptions.budgetUUID = budgetUUID;
+  }
+
   const response = useQuery({
     queryKey: generateKey('enterprise-course', enterpriseCustomerUUID, requestOptions),
     queryFn: () => EnterpriseDataApiService.fetchEnterpriseCourses(