fix: course about URL should use course key, not course run key.

When the spent table was first implemented, it utilized the Analytics
API to fetch enrollments, and that data source contained a course key
field.  However, when we switched over to real-time fetching of
redemptions via the transaction list API for assignable budgets, we
erroneously treated the `content_key` field as a course key, breaking
the course about page link in the spent table.

The following two PRs implment a `parent_content_key` field in the
transaction list API, which we can now utilize for the real-time spent
table implmentation:

* openedx/openedx-ledger#60
* openedx/enterprise-subsidy#209

ENT-8389

src/components/learner-credit-management/SpendTableEnrollmentDetails.jsx

@@ -28,7 +28,7 @@ const SpendTableEnrollmentDetailsContents = ({
       fulfillmentIdentifier={row.original.fulfillmentIdentifier}
     />
     <div>
-      {enableLearnerPortal ? (
+      {(enableLearnerPortal && row.original.courseKey) ? (
         <Hyperlink
           className="x-small"
           destination={`${getConfig().ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${row.original.courseKey}`}

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

@@ -1,6 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { act, renderHook } from '@testing-library/react-hooks/dom';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { v4 as uuidv4 } from 'uuid';
 
 import useBudgetRedemptions from '../useBudgetRedemptions';
 import useSubsidyAccessPolicy from '../useSubsidyAccessPolicy';
@@ -10,8 +11,11 @@ import { queryClient } from '../../../../test/testUtils';
 
 const TEST_ENTERPRISE_UUID = 'test-enterprise-uuid';
 const TEST_ENTERPRISE_OFFER_ID = 1;
-const subsidyUuid = 'test-subsidy-uuid';
+const subsidyUuid = uuidv4();
+const transactionUuid = uuidv4();
 const courseTitle = 'Test Course Title';
+const courseKey = 'edX+test';
+const courseRunKey = `course-v1:${courseKey}+course.1`;
 const userEmail = '[email protected]';
 
 const mockOfferEnrollments = [{
@@ -33,14 +37,15 @@ const mockSubsidyTransactionResponse = {
   current_page: 1,
   num_pages: 5,
   results: [{
-    uuid: subsidyUuid,
+    uuid: transactionUuid,
     state: 'committed',
-    idempotency_key: '5d00d319-fe46-41f7-b14e-966534da9f72',
+    idempotency_key: 'does-not-matter',
     lms_user_id: 999,
     lms_user_email: userEmail,
-    content_key: 'course-v1:edX+test+course.1',
+    content_key: courseRunKey,
+    parent_content_key: courseKey,
     content_title: courseTitle,
-    quantity: -1000,
+    quantity: -1500,
     unit: 'usd_cents',
   }],
 };
@@ -145,7 +150,8 @@ describe('useBudgetRedemptions', () => {
     }
 
     const mockExpectedResultsObj = isTopDownAssignmentEnabled ? [{
-      courseListPrice: 10,
+      courseListPrice: 15,
+      courseKey,
       courseTitle,
       userEmail,
     }] : camelCaseObject(mockOfferEnrollments);

src/components/learner-credit-management/data/utils.js

@@ -81,13 +81,14 @@ export const transformSubsidySummary = (subsidySummary) => {
 };
 
 /**
- * Transforms enrollment data from analytics api to fields for display
- * in learner credit allocation table.
- * A uuid is added to each enrollment to be used as a key for the table.
+ * Transforms enrollment data from analytics api to fields for display in learner credit spent table.
+ *
+ * Notes:
+ * * A uuid is synthesized for each enrollment to be used as a key for the table.
  *
  * @param {array} results List of raw enrollment results from API.
  *
- * @returns List of transformed results for display in table.
+ * @returns List of transformed results for display in spent table.
  */
 export const transformUtilizationTableResults = results => results.map(result => ({
   created: result.created,
@@ -100,6 +101,16 @@ export const transformUtilizationTableResults = results => results.map(result =>
   courseKey: result.courseKey,
 }));
 
+/**
+ * Transforms redemptions data from transaction list API to fields for display in learner credit spent table.
+ *
+ * Notes:
+ * * This supports the "real-time" spent table implementation.
+ *
+ * @param {array} results List of raw enrollment results from API.
+ *
+ * @returns List of transformed results for display in spent table.
+ */
 export const transformUtilizationTableSubsidyTransactionResults = results => results.map(result => ({
   created: result.created,
   enrollmentDate: result.created,
@@ -109,7 +120,8 @@ export const transformUtilizationTableSubsidyTransactionResults = results => res
   courseTitle: result.contentTitle,
   courseListPrice: result.unit === 'usd_cents' ? -1 * (result.quantity / 100) : -1 * results.quantity,
   uuid: result.uuid,
-  courseKey: result.contentKey,
+  // In the transaction list response, `parent_content_key` is the course key, and `content_key` is the course run key.
+  courseKey: result.parentContentKey,
 }));
 
 /**