diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
index bc837c95af..a525006f67 100644
--- a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
+++ b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
@@ -2,9 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import {
- DataTable, useMediaQuery, breakpoints,
+ Avatar, DataTable, Hyperlink, useMediaQuery, breakpoints,
} from '@edx/paragon';
-
+import { connect } from 'react-redux';
+import { getConfig } from '@edx/frontend-platform/config';
import TableTextFilter from './TableTextFilter';
import EmailAddressTableCell from './EmailAddressTableCell';
@@ -14,6 +15,7 @@ export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array
const getDescriptionAccessor = row => ({
courseTitle: row.courseTitle,
userEmail: row.userEmail,
+ courseKey: row.courseKey,
});
const FilterStatus = (rest) => ;
@@ -23,6 +25,7 @@ const LearnerCreditAllocationTable = ({
tableData,
fetchTableData,
enterpriseUUID,
+ enterpriseSlug,
budgetType,
}) => {
const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
@@ -45,7 +48,7 @@ const LearnerCreditAllocationTable = ({
Header: 'Date',
accessor: 'enrollmentDate',
// eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
- Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
+ Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM D, YYYY'),
disableFilters: true,
},
{
@@ -54,9 +57,18 @@ const LearnerCreditAllocationTable = ({
// eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
Cell: ({ row }) => (
<>
- {/* eslint-disable-next-line react/prop-types */}
-
{row.original.courseTitle}
+ {' '}
+
+
+ {/* eslint-disable-next-line react/prop-types */}
+ {row.original.courseTitle}
+
+
>
),
disableFilters: false,
@@ -104,6 +116,7 @@ LearnerCreditAllocationTable.defaultProps = {
LearnerCreditAllocationTable.propTypes = {
enterpriseUUID: PropTypes.string.isRequired,
+ enterpriseSlug: PropTypes.string.isRequired,
isLoading: PropTypes.bool.isRequired,
tableData: PropTypes.shape({
results: PropTypes.arrayOf(PropTypes.shape({
@@ -120,4 +133,8 @@ LearnerCreditAllocationTable.propTypes = {
budgetType: PropTypes.string,
};
-export default LearnerCreditAllocationTable;
+const mapStateToProps = state => ({
+ enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+});
+
+export default connect(mapStateToProps)(LearnerCreditAllocationTable);
diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
index 22cff6cd3a..3307e0ce47 100644
--- a/src/components/learner-credit-management/data/utils.js
+++ b/src/components/learner-credit-management/data/utils.js
@@ -66,6 +66,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/LearnerCreditAllocationTable.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
index 21951a1f54..6ae6c00bae 100644
--- a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
+++ b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx
@@ -4,13 +4,28 @@ import {
render,
} from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
import LearnerCreditAllocationTable from '../LearnerCreditAllocationTable';
+const mockStore = configureMockStore();
+const store = mockStore({
+ portalConfiguration: {
+ enterpriseSlug: 'test-enterprise-slug',
+ },
+});
+
+jest.mock('@edx/frontend-platform/config', () => ({
+ getConfig: () => ({ ENTERPRISE_LEARNER_PORTAL_URL: 'https://enterprise.edx.org' }),
+}));
+
const LearnerCreditAllocationTableWrapper = (props) => (
-
-
-
+
+
+
+
+
);
describe('', () => {
@@ -65,4 +80,33 @@ describe('', () => {
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',
+ tableData: {
+ results: [{
+ userEmail: 'test@example.com',
+ 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();
+
+ 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);
+ });
});