feat: Filter out bad data for LCM table (#860)

* feat: Filter out bad data for LCM table

* feat: Filter out bad data for LCM table

* feat: Filter out bad data for LCM table

* Merge

Author: brobro10000

package-lock.json

@@ -66,6 +66,7 @@
     "regenerator-runtime": "0.13.7",
     "universal-cookie": "4.0.4",
     "url": "0.11.0",
+    "uuid": "9.0.0",
     "validator": "10.11.0"
   },
   "peerDependencies": {
@@ -95,4 +96,4 @@
     "react-test-renderer": "16.13.1",
     "resize-observer-polyfill": "1.5.1"
   }
-}
+}

package.json

@@ -59,7 +59,7 @@ EmailAddressTableCell.propTypes = {
   row: PropTypes.shape({
     original: PropTypes.shape({
       userEmail: PropTypes.string,
-      enterpriseEnrollmentId: PropTypes.number.isRequired,
+      enterpriseEnrollmentId: PropTypes.number,
     }),
   }).isRequired,
   enterpriseUUID: PropTypes.string.isRequired,

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

@@ -18,7 +18,6 @@ const LearnerCreditAllocationTable = ({
   enterpriseUUID,
 }) => {
   const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
-
   return (
     <DataTable
       isSortable
@@ -55,7 +54,7 @@ const LearnerCreditAllocationTable = ({
         },
       ]}
       initialTableOptions={{
-        getRowId: row => row.enterpriseEnrollmentId.toString(),
+        getRowId: row => row?.uuid?.toString(),
       }}
       initialState={{
         pageSize: PAGE_SIZE,
@@ -85,7 +84,7 @@ LearnerCreditAllocationTable.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   tableData: PropTypes.shape({
     results: PropTypes.arrayOf(PropTypes.shape({
-      userEmail: PropTypes.string.isRequired,
+      userEmail: PropTypes.string,
       courseTitle: PropTypes.string.isRequired,
       courseListPrice: PropTypes.number.isRequired,
       enrollmentDate: PropTypes.string.isRequired,

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

@@ -1,8 +1,8 @@
+import { v4 as uuidv4 } from 'uuid';
 import {
   LOW_REMAINING_BALANCE_PERCENT_THRESHOLD,
   NO_BALANCE_REMAINING_DOLLAR_THRESHOLD,
 } from './constants';
-
 /**
  * Transforms offer summary from API for display in the UI, guarding
  * against bad data (e.g., accounting for refunds).
@@ -45,6 +45,7 @@ export const transformOfferSummary = (offerSummary) => {
 /**
  * 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.
  *
  * @param {array} results List of raw enrollment results from API.
  *
@@ -57,6 +58,7 @@ export const transformUtilizationTableResults = results => results.map(result =>
   courseTitle: result.courseTitle,
   courseListPrice: result.courseListPrice,
   enrollmentDate: result.enrollmentDate,
+  uuid: uuidv4(),
 }));
 
 /**

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

@@ -139,6 +139,7 @@ describe('<LearnerCreditManagement />', () => {
         courseTitle: 'edX Demonstration Course',
         courseListPrice: 100,
         enrollmentDate: '2022-01-01',
+        uuid: '123abc-abc123',
       };
       const subsidiesContextValue = {
         offers: [mockOffer],