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); + }); });