chore: courseTitle links to course

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) => <DataTable.FilterStatus showFilteredFields={false} {...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 */}
- <div>{row.original.courseTitle}</div>
+ <Avatar size="xs" />{' '}
  <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />
+ <div>
+ <Hyperlink
+ // eslint-disable-next-line react/prop-types
+ destination={`${getConfig().ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${row.original.courseKey}`}
+ target="_blank"
+ >
+ {/* eslint-disable-next-line react/prop-types */}
+ {row.original.courseTitle}
+ </Hyperlink>
+ </div>
  </>
  ),
  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);

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,
 }));
 
 /**

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) => (
- <IntlProvider locale="en">
- <LearnerCreditAllocationTable {...props} />
- </IntlProvider>
+ <Provider store={store}>
+ <IntlProvider locale="en">
+ <LearnerCreditAllocationTable {...props} />
+ </IntlProvider>
+ </Provider>
 );
 
 describe('<LearnerCreditAllocationTable />', () => {
@@ -65,4 +80,33 @@ describe('<LearnerCreditAllocationTable />', () => {
 
  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: '[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 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);
+ });
 });