diff --git a/src/components/learner-credit-management/BudgetCard.jsx b/src/components/learner-credit-management/BudgetCard.jsx index 17b533242f..7738d87925 100644 --- a/src/components/learner-credit-management/BudgetCard.jsx +++ b/src/components/learner-credit-management/BudgetCard.jsx @@ -10,6 +10,7 @@ import { Breadcrumb, } from '@edx/paragon'; +import { getCourseProductLineAbbreviation } from '../../utils'; import { useOfferRedemptions, useOfferSummary } from './data/hooks'; import LearnerCreditAggregateCards from './LearnerCreditAggregateCards'; import LearnerCreditAllocationTable from './LearnerCreditAllocationTable'; @@ -153,6 +154,7 @@ const BudgetCard = ({ tableData={offerRedemptions} fetchTableData={fetchOfferRedemptions} enterpriseUUID={enterpriseUUID} + budgetType={getCourseProductLineAbbreviation(activeLabel)} /> )} diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx index 12eada0677..e2b96dfb32 100644 --- a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx +++ b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx @@ -8,6 +8,7 @@ import moment from 'moment'; import TableTextFilter from './TableTextFilter'; import EmailAddressTableCell from './EmailAddressTableCell'; import { getCourseProductLineText } from '../../utils'; +import SubscriptionCard from '../subscriptions/SubscriptionCard'; export const PAGE_SIZE = 20; export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array @@ -17,8 +18,11 @@ const LearnerCreditAllocationTable = ({ tableData, fetchTableData, enterpriseUUID, + budgetType, }) => { const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth }); + const defaultFilter = budgetType ? [{ id: 'courseProductLine', value: budgetType }] : []; + return ( getCourseProductLineText(row.values.courseProductLine), + disableFilters: true, }, ]} initialTableOptions={{ @@ -68,6 +73,7 @@ const LearnerCreditAllocationTable = ({ sortBy: [ { id: 'enrollmentDate', desc: true }, ], + filters: defaultFilter, }} fetchData={fetchTableData} data={tableData.results} @@ -85,6 +91,9 @@ const LearnerCreditAllocationTable = ({ /> ); }; +SubscriptionCard.defaultProps = { + budgetType: null, +}; LearnerCreditAllocationTable.propTypes = { enterpriseUUID: PropTypes.string.isRequired, @@ -101,6 +110,7 @@ LearnerCreditAllocationTable.propTypes = { pageCount: PropTypes.number.isRequired, }).isRequired, fetchTableData: PropTypes.func.isRequired, + budgetType: PropTypes.string, }; export default LearnerCreditAllocationTable; diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx index eec600c2e0..ae2cc337f3 100644 --- a/src/components/learner-credit-management/tests/BudgetCard.test.jsx +++ b/src/components/learner-credit-management/tests/BudgetCard.test.jsx @@ -12,6 +12,7 @@ import { } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import BudgetCard from '../BudgetCard'; import { useOfferSummary, useOfferRedemptions } from '../data/hooks'; @@ -30,7 +31,6 @@ useOfferRedemptions.mockReturnValue({ fetchOfferRedemptions: jest.fn(), }); - const mockStore = configureMockStore([thunk]); const getMockStore = store => mockStore(store); const enterpriseId = 'test-enterprise'; @@ -55,7 +55,9 @@ const mockOfferSummary = { const BudgetCardWrapper = ({ ...rest }) => ( - + + + ); diff --git a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx index 00ebf8f3fc..fb79748c70 100644 --- a/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx +++ b/src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx @@ -18,6 +18,7 @@ describe('', () => { const props = { enterpriseUUID: 'test-enterprise-id', isLoading: false, + budgetType: 'OCM', tableData: { results: [{ userEmail: 'test@example.com', @@ -47,4 +48,22 @@ describe('', () => { })); expect(screen.getByText('February', { exact: false })); }); + it('renders with empty table data', () => { + const props = { + enterpriseUUID: 'test-enterprise-id', + isLoading: false, + budgetType: 'OCM', + tableData: { + results: [], + itemCount: 0, + pageCount: 0, + }, + fetchTableData: jest.fn(), + }; + props.fetchTableData.mockReturnValue(props.tableData); + + render(); + + expect(screen.getByText('No results found', { exact: false })); + }); }); diff --git a/src/utils.js b/src/utils.js index f92dff63b7..3848d3f450 100644 --- a/src/utils.js +++ b/src/utils.js @@ -406,6 +406,12 @@ const getCourseProductLineText = (courseProductLine) => { return courseProductLineText; }; +const getCourseProductLineAbbreviation = (courseProductLine) => { + let courseProductLineText = ''; + courseProductLineText = courseProductLine === 'Open Courses Marketplace' ? 'OCM' : 'Executive Education'; + return courseProductLineText; +}; + export { camelCaseDict, camelCaseDictArray, @@ -440,4 +446,5 @@ export { pollAsync, isNotValidNumberString, getCourseProductLineText, + getCourseProductLineAbbreviation, };