Refactor LearnerCreditAllocationTable

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

@@ -7,11 +7,17 @@
 
 import TableTextFilter from './TableTextFilter';
 import EmailAddressTableCell from './EmailAddressTableCell';
-import { getCourseProductLineText } from '../../utils';
 
 export const PAGE_SIZE = 20;
 export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array
 
+const getDescriptionAccessor = row => ({
+ courseTitle: row.courseTitle,
+ userEmail: row.userEmail,
+});
+
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
 const LearnerCreditAllocationTable = ({
  isLoading,
  tableData,
@@ -33,38 +39,37 @@
  showFiltersInSidebar={isDesktopTable}
  isLoading={isLoading}
  defaultColumnValues={{ Filter: TableTextFilter }}
+ FilterStatusComponent={FilterStatus}
  columns={[
  {
- Header: 'Email Address',
- accessor: 'userEmail',
+ Header: 'Date',
+ accessor: 'enrollmentDate',
  // eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
- Cell: ({ row }) => <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />,
+ Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
+ disableFilters: true,
  },
  {
- Header: 'Course Name',
- accessor: 'courseTitle',
+ Header: 'Description',
+ accessor: getDescriptionAccessor,
+ // eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
+ Cell: ({ row }) => (
+ <>
+ <div>{row.original.courseTitle}</div>
+ <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />
+ </>
+ ),
+ disableFilters: false,
+ disableSortBy: true,
  },
  {
- Header: 'Course Price',
+ Header: 'Amount',
  accessor: 'courseListPrice',
  Cell: ({ row }) => `$${row.values.courseListPrice}`,
  disableFilters: true,
  },
- {
- Header: 'Date Spent',
- accessor: 'enrollmentDate',
- Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
- disableFilters: true,
- },
- {
- Header: 'Product',
- accessor: 'courseProductLine',
- Cell: ({ row }) => getCourseProductLineText(row.values.courseProductLine),
- disableFilters: true,
- },
  ]}
  initialTableOptions={{
  getRowId: row => row?.uuid?.toString(),
  }}
  initialState={{
  pageSize: PAGE_SIZE,

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

@@ -63,18 +63,15 @@ const applySortByToOptions = (sortBy, options) => {
 };
 
 const applyFiltersToOptions = (filters, options) => {
- const userSearchQuery = filters?.find(filter => filter.id === 'userEmail')?.value;
- const courseTitleSearchQuery = filters?.find(filter => filter.id === 'courseTitle')?.value;
  const courseProductLineSearchQuery = filters?.find(filter => filter.id === 'courseProductLine')?.value;
- if (userSearchQuery) {
- Object.assign(options, { search: userSearchQuery });
- }
- if (courseTitleSearchQuery) {
- Object.assign(options, { searchCourse: courseTitleSearchQuery });
- }
+ const searchQuery = filters?.find(filter => filter.id.toLowerCase() === 'description')?.value;
+
  if (courseProductLineSearchQuery) {
  Object.assign(options, { courseProductLine: courseProductLineSearchQuery });
  }
+ if (searchQuery) {
+ Object.assign(options, { searchAll: searchQuery });
+ }
 };
 
 export const useOfferRedemptions = (enterpriseUUID, offerId) => {

src/components/learner-credit-management/data/tests/hooks.test.js

@@ -105,8 +105,7 @@ describe('useOfferRedemptions', () => {
  { id: 'enrollmentDate', desc: true },
  ],
  filters: [
- { id: 'userEmail', value: mockOfferEnrollments[0].user_email },
- { id: 'courseTitle', value: mockOfferEnrollments[0].course_title },
+ { id: 'Description', value: mockOfferEnrollments[0].user_email },
  ],
  });
  });
@@ -118,8 +117,7 @@ describe('useOfferRedemptions', () => {
  pageSize: 20,
  offerId: mockEnterpriseOffer.id,
  ordering: '-enrollment_date', // default sort order
- search: mockOfferEnrollments[0].user_email,
- searchCourse: mockOfferEnrollments[0].course_title,
+ searchAll: mockOfferEnrollments[0].user_email,
  ignoreNullCourseListPrice: true,
  };
  expect(EnterpriseDataApiService.fetchCourseEnrollments).toHaveBeenCalledWith(

src/components/learner-credit-management/tests/BudgetCard.test.jsx

@@ -133,7 +133,6 @@ describe('<BudgetCard />', () => {
  const elementsWithTestId = screen.getAllByTestId('view-budget');
  const firstElementWithTestId = elementsWithTestId[0];
  await waitFor(() => userEvent.click(firstElementWithTestId));
- expect(screen.getByText('Filters'));
  expect(screen.getByText('No results found'));
  });
  });

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

@@ -36,7 +36,6 @@ describe('<LearnerCreditAllocationTable />', () => {
 
  render(<LearnerCreditAllocationTableWrapper {...props} />);
 
- expect(screen.getByText('Open', { exact: false }));
  expect(screen.getByText(props.tableData.results[0].userEmail.toString(), {
  exact: false,
  }));