Merge branch 'master' into mkeating/ENT-7580

openedx · Sep 1, 2023 · b9e97b1 · b9e97b1
2 parents 0979d48 + 5a629a5
commit b9e97b1
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 35 deletions.
diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -19,6 +19,7 @@ const BudgetCard = ({
   offer,
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => {
   const {
     start,
@@ -143,6 +144,8 @@ const BudgetCard = ({
             tableData={offerRedemptions}
             fetchTableData={fetchOfferRedemptions}
             enterpriseUUID={enterpriseUUID}
+            enterpriseSlug={enterpriseSlug}
+            enableLearnerPortal={enableLearnerPortal}
           />
         )}
     </Stack>
@@ -158,6 +161,7 @@ BudgetCard.propTypes = {
   }).isRequired,
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default BudgetCard;
diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import {
-  DataTable, useMediaQuery, breakpoints,
-} from '@edx/paragon';
-
+import { DataTable, Hyperlink } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform/config';
 import TableTextFilter from './TableTextFilter';
 import EmailAddressTableCell from './EmailAddressTableCell';
 import { getCourseProductLineText } from '../../utils';
 
 export const PAGE_SIZE = 20;
 export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array
 
+const getEnrollmentDetailsAccessor = row => ({
+  courseTitle: row.courseTitle,
+  userEmail: row.userEmail,
+  courseKey: row.courseKey,
+});
+
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
 const LearnerCreditAllocationTable = ({
   isLoading,
   tableData,
   fetchTableData,
   enterpriseUUID,
+  enterpriseSlug,
+  enableLearnerPortal,
 }) => {
-  const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
   const defaultFilter = [];
 
   return (
@@ -29,32 +36,46 @@ const LearnerCreditAllocationTable = ({
       manualPagination
       isFilterable
       manualFilters
-      showFiltersInSidebar={isDesktopTable}
       isLoading={isLoading}
       defaultColumnValues={{ Filter: TableTextFilter }}
+      FilterStatusComponent={FilterStatus}
+      /* eslint-disable */
       columns={[
         {
-          Header: 'Email Address',
-          accessor: 'userEmail',
-          // eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
-          Cell: ({ row }) => <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />,
+          Header: 'Date',
+          accessor: 'enrollmentDate',
+          Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMM D, YYYY'),
+          disableFilters: true,
         },
         {
-          Header: 'Course Name',
-          accessor: 'courseTitle',
+          Header: 'Enrollment details',
+          accessor: getEnrollmentDetailsAccessor,
+          Cell: ({ row }) => (
+            <>
+              <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />
+              <div>
+                {enableLearnerPortal ? (
+                <Hyperlink
+                  destination={`${getConfig().ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${row.original.courseKey}`}
+                  target="_blank"
+                >
+                  {row.original.courseTitle}
+                </Hyperlink>
+                ) : (
+                  row.original.courseTitle
+                )}
+              </div>
+            </>
+          ),
+          disableFilters: false,
+          disableSortBy: true,
         },
         {
-          Header: 'Course Price',
+          Header: 'Amount',
           accessor: 'courseListPrice',
           Cell: ({ row }) => `$${row.values.courseListPrice}`,
           disableFilters: true,
         },
-        {
-          Header: 'Date Spent',
-          accessor: 'enrollmentDate',
-          Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
-          disableFilters: true,
-        },
         {
           Header: 'Product',
           accessor: 'courseProductLine',
@@ -78,7 +99,6 @@ const LearnerCreditAllocationTable = ({
       itemCount={tableData.itemCount}
       pageCount={tableData.pageCount}
       EmptyTableComponent={
-        // eslint-disable-next-line react/no-unstable-nested-components
         () => {
           if (isLoading) {
             return null;
@@ -89,9 +109,12 @@ const LearnerCreditAllocationTable = ({
     />
   );
 };
+/* eslint-enable */
 
 LearnerCreditAllocationTable.propTypes = {
   enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   tableData: PropTypes.shape({
     results: PropTypes.arrayOf(PropTypes.shape({

diff --git a/src/components/learner-credit-management/MultipleBudgetsPage.jsx b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
@@ -22,6 +22,7 @@ const PAGE_TITLE = 'Learner Credit';
 const MultipleBudgetsPage = ({
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => {
   const { offers, isLoading } = useContext(EnterpriseSubsidiesContext);
 
@@ -66,6 +67,7 @@ const MultipleBudgetsPage = ({
         offers={offers}
         enterpriseUUID={enterpriseUUID}
         enterpriseSlug={enterpriseSlug}
+        enableLearnerPortal={enableLearnerPortal}
       />
     </>
   );
@@ -74,11 +76,13 @@ const MultipleBudgetsPage = ({
 const mapStateToProps = state => ({
   enterpriseUUID: state.portalConfiguration.enterpriseId,
   enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+  enableLearnerPortal: state.portalConfiguration.enableLearnerPortal,
 });
 
 MultipleBudgetsPage.propTypes = {
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default connect(mapStateToProps)(MultipleBudgetsPage);
diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -12,6 +12,7 @@ const MultipleBudgetsPicker = ({
   offers,
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => (
   <Stack>
     <Row>
@@ -22,6 +23,7 @@ const MultipleBudgetsPicker = ({
             offer={offer}
             enterpriseUUID={enterpriseUUID}
             enterpriseSlug={enterpriseSlug}
+            enableLearnerPortal={enableLearnerPortal}
           />
         ))}
       </Col>
@@ -33,6 +35,7 @@ MultipleBudgetsPicker.propTypes = {
   offers: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default MultipleBudgetsPicker;
diff --git a/src/components/learner-credit-management/data/hooks.js b/src/components/learner-credit-management/data/hooks.js
@@ -63,18 +63,15 @@ const applySortByToOptions = (sortBy, options) => {
 };
 
 const applyFiltersToOptions = (filters, options) => {
-  const userSearchQuery = filters?.find(filter => filter.id === 'userEmail')?.value;
-  const courseTitleSearchQuery = filters?.find(filter => filter.id === 'courseTitle')?.value;
   const courseProductLineSearchQuery = filters?.find(filter => filter.id === 'courseProductLine')?.value;
-  if (userSearchQuery) {
-    Object.assign(options, { search: userSearchQuery });
-  }
-  if (courseTitleSearchQuery) {
-    Object.assign(options, { searchCourse: courseTitleSearchQuery });
-  }
+  const searchQuery = filters?.find(filter => filter.id.toLowerCase() === 'enrollment details')?.value;
+
   if (courseProductLineSearchQuery) {
     Object.assign(options, { courseProductLine: courseProductLineSearchQuery });
   }
+  if (searchQuery) {
+    Object.assign(options, { searchAll: searchQuery });
+  }
 };
 
 export const useOfferRedemptions = (enterpriseUUID, offerId) => {

diff --git a/src/components/learner-credit-management/data/tests/hooks.test.js b/src/components/learner-credit-management/data/tests/hooks.test.js
@@ -105,8 +105,7 @@ describe('useOfferRedemptions', () => {
           { id: 'enrollmentDate', desc: true },
         ],
         filters: [
-          { id: 'userEmail', value: mockOfferEnrollments[0].user_email },
-          { id: 'courseTitle', value: mockOfferEnrollments[0].course_title },
+          { id: 'Enrollment Details', value: mockOfferEnrollments[0].user_email },
         ],
       });
     });
@@ -118,8 +117,7 @@ describe('useOfferRedemptions', () => {
       pageSize: 20,
       offerId: mockEnterpriseOffer.id,
       ordering: '-enrollment_date', // default sort order
-      search: mockOfferEnrollments[0].user_email,
-      searchCourse: mockOfferEnrollments[0].course_title,
+      searchAll: mockOfferEnrollments[0].user_email,
       ignoreNullCourseListPrice: true,
     };
     expect(EnterpriseDataApiService.fetchCourseEnrollments).toHaveBeenCalledWith(

diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
@@ -68,6 +68,7 @@ export const transformUtilizationTableResults = results => results.map(result =>
   enrollmentDate: result.enrollmentDate,
   courseProductLine: result.courseProductLine,
   uuid: uuidv4(),
+  courseKey: result.courseKey,
 }));
 
 /**

diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -141,7 +141,6 @@ describe('<BudgetCard />', () => {
       const elementsWithTestId = screen.getAllByTestId('view-budget');
       const firstElementWithTestId = elementsWithTestId[0];
       await waitFor(() => userEvent.click(firstElementWithTestId));
-      expect(screen.getByText('Filters'));
       expect(screen.getByText('No results found'));
     });
   });

diff --git a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
@@ -7,6 +7,10 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import LearnerCreditAllocationTable from '../LearnerCreditAllocationTable';
 
+jest.mock('@edx/frontend-platform/config', () => ({
+  getConfig: () => ({ ENTERPRISE_LEARNER_PORTAL_URL: 'https://enterprise.edx.org' }),
+}));
+
 const LearnerCreditAllocationTableWrapper = (props) => (
   <IntlProvider locale="en">
     <LearnerCreditAllocationTable {...props} />
@@ -19,6 +23,8 @@ describe('<LearnerCreditAllocationTable />', () => {
       enterpriseUUID: 'test-enterprise-id',
       isLoading: false,
       budgetType: 'OCM',
+      enterpriseSlug: 'test-enterprise-slug',
+      enableLearnerPortal: true,
       tableData: {
         results: [{
           userEmail: '[email protected]',
@@ -36,7 +42,6 @@ describe('<LearnerCreditAllocationTable />', () => {
 
     render(<LearnerCreditAllocationTableWrapper {...props} />);
 
-    expect(screen.getByText('Open', { exact: false }));
     expect(screen.getByText(props.tableData.results[0].userEmail.toString(), {
       exact: false,
     }));
@@ -46,7 +51,7 @@ describe('<LearnerCreditAllocationTable />', () => {
     expect(screen.getByText(props.tableData.results[0].courseListPrice.toString(), {
       exact: false,
     }));
-    expect(screen.getByText('February', { exact: false }));
+    expect(screen.getByText('Feb', { exact: false }));
   });
   it('renders with empty table data', () => {
     const props = {
@@ -66,4 +71,63 @@ describe('<LearnerCreditAllocationTable />', () => {
 
     expect(screen.getByText('No results found', { exact: false }));
   });
+
+  it('constructs the correct URL for the course', () => {
+    const props = {
+      enterpriseUUID: 'test-enterprise-id',
+      isLoading: false,
+      budgetType: 'OCM',
+      enterpriseSlug: 'test-enterprise-slug',
+      enableLearnerPortal: true,
+      tableData: {
+        results: [{
+          userEmail: '[email protected]',
+          courseTitle: 'course-title',
+          courseKey: 'course-v1:edX=CTL.SC101x.3T2019',
+          courseListPrice: 100,
+          enrollmentDate: '2-2-23',
+          courseProductLine: 'OCM',
+        }],
+        itemCount: 1,
+        pageCount: 1,
+      },
+      fetchTableData: jest.fn(),
+    };
+    props.fetchTableData.mockReturnValue(props.tableData);
+
+    render(<LearnerCreditAllocationTableWrapper {...props} />);
+
+    const expectedLink = 'https://enterprise.edx.org/test-enterprise-slug/course/course-v1:edX=CTL.SC101x.3T2019';
+    const courseLinkElement = screen.getByText('course-title');
+
+    expect(courseLinkElement.getAttribute('href')).toBe(expectedLink);
+  });
+
+  it('does not render the course link if the learner portal is disabled', () => {
+    const props = {
+      enterpriseUUID: 'test-enterprise-id',
+      isLoading: false,
+      budgetType: 'OCM',
+      enterpriseSlug: 'test-enterprise-slug',
+      enableLearnerPortal: false,
+      tableData: {
+        results: [{
+          userEmail: '[email protected]',
+          courseTitle: 'course-title',
+          courseKey: 'course-v1:edX=CTL.SC101x.3T2019',
+          courseListPrice: 100,
+          enrollmentDate: '2-2-23',
+          courseProductLine: 'OCM',
+        }],
+        itemCount: 1,
+        pageCount: 1,
+      },
+      fetchTableData: jest.fn(),
+    };
+    props.fetchTableData.mockReturnValue(props.tableData);
+
+    render(<LearnerCreditAllocationTableWrapper {...props} />);
+    const courseTitleElement = screen.queryByText('course-title');
+    expect(courseTitleElement.closest('a')).toBeNull();
+  });
 });