ENT-7512: LearnerCreditAllocationTable course title (#1025)

* chore: courseTitle link in LCM only if learner portal enabled
openedx · Sep 1, 2023 · 5a629a5 · 5a629a5
1 parent ef1692d
commit 5a629a5
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 0 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,
@@ -144,6 +145,7 @@ const BudgetCard = ({
             fetchTableData={fetchOfferRedemptions}
             enterpriseUUID={enterpriseUUID}
             enterpriseSlug={enterpriseSlug}
+            enableLearnerPortal={enableLearnerPortal}
           />
         )}
     </Stack>
@@ -159,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
@@ -16,12 +16,15 @@ const getEnrollmentDetailsAccessor = row => ({
   courseKey: row.courseKey,
 });
 
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
 const LearnerCreditAllocationTable = ({
   isLoading,
   tableData,
   fetchTableData,
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => {
   const defaultFilter = [];
 
@@ -35,6 +38,7 @@ const LearnerCreditAllocationTable = ({
       manualFilters
       isLoading={isLoading}
       defaultColumnValues={{ Filter: TableTextFilter }}
+      FilterStatusComponent={FilterStatus}
       /* eslint-disable */
       columns={[
         {
@@ -50,12 +54,16 @@ const LearnerCreditAllocationTable = ({
             <>
               <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>
             </>
           ),
@@ -106,6 +114,7 @@ const LearnerCreditAllocationTable = ({
 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/tests/LearnerCreditAllocationTable.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
@@ -24,6 +24,7 @@ describe('<LearnerCreditAllocationTable />', () => {
       isLoading: false,
       budgetType: 'OCM',
       enterpriseSlug: 'test-enterprise-slug',
+      enableLearnerPortal: true,
       tableData: {
         results: [{
           userEmail: '[email protected]',
@@ -77,6 +78,7 @@ describe('<LearnerCreditAllocationTable />', () => {
       isLoading: false,
       budgetType: 'OCM',
       enterpriseSlug: 'test-enterprise-slug',
+      enableLearnerPortal: true,
       tableData: {
         results: [{
           userEmail: '[email protected]',
@@ -100,4 +102,32 @@ describe('<LearnerCreditAllocationTable />', () => {
 
     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();
+  });
 });