Skip to content

Commit

Permalink
chore: Migrate deprecated Table to DataTable for CompletedLearnersTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@zwidekalanga
zwidekalanga committed Sep 16, 2024
1 parent 115c430 commit 76d42bf
Show file tree
Hide file tree
Showing 12 changed files with 485 additions and 156 deletions.
64 changes: 64 additions & 0 deletions src/components/Admin/CompletedLearnersTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { DataTable } from '@openedx/paragon';
import { useGenericTableData } from './data/hooks';
import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
import Email from './Email';

const CompletedLearnersTable = (enterpriseId) => {
const intl = useIntl();
const {
isLoading,
tableData,
fetchTableData,
} = useGenericTableData(
enterpriseId,
'completed-learners',
EnterpriseDataApiService.fetchCompletedLearners,
{
userEmail: { key: 'user_email' },
completedCourses: { key: 'completed_courses' },
},
);

return (
<DataTable
isSortable
manualSortBy
isPaginated
manualPagination
isLoading={isLoading}
columns={[
{
Header: intl.formatMessage({
id: 'admin.portal.lpr.completed.learners.table.user_email.column.heading',
defaultMessage: 'Email',
description: 'Column heading for the user email column in the completed learners table',
}),
accessor: 'userEmail',
Cell: Email,
},
{
Header: intl.formatMessage({
id: 'admin.portal.lpr.completed.learners.table.completed_courses.column.heading',
defaultMessage: 'Total Course Completed Count',
description: 'Column heading for the completed courses column in the completed learners table',
}),
accessor: 'completedCourses',
},
]}
initialState={{
pageIndex: 20,
pageSize: 0,
sortBy: [{ id: 'completedCourses', desc: true }],
selectedRowsOrdered: [],
}}
fetchData={fetchTableData}
data={tableData.results}
itemCount={tableData.itemCount}
pageCount={tableData.pageCount}
/>
);
};

export default CompletedLearnersTable;
29 changes: 16 additions & 13 deletions ...nersTable/CompletedLearnersTable.test.jsx → ...nts/Admin/CompletedLearnersTable.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,20 @@ import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

import CompletedLearnersTable from '.';
import CompletedLearnersTable from './CompletedLearnersTable';
import { useGenericTableData } from './data/hooks';

const mockStore = configureMockStore([thunk]);
const enterpriseId = 'test-enterprise';

jest.mock('./data/hooks/useGenericTableData', () => (
jest.fn().mockReturnValue({})
));

const store = mockStore({
portalConfiguration: {
enterpriseId,
},
table: {
'completed-learners': {
data: {
results: [],
current_page: 1,
num_pages: 1,
},
ordering: null,
loading: false,
error: null,
},
},
});

const CompletedLearnersWrapper = props => (
Expand All @@ -42,6 +36,15 @@ const CompletedLearnersWrapper = props => (

describe('CompletedLearnersTable', () => {
it('renders empty state correctly', () => {
useGenericTableData.mockReturnValue({
isLoading: false,
tableData: {
results: [],
itemCount: 0,
pageCount: 0,
},
fetchTableData: jest.fn(),
});
const tree = renderer
.create((
<CompletedLearnersWrapper />
Expand Down
16 changes: 16 additions & 0 deletions src/components/Admin/Email.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';

const Email = ({ row }) => (
<span data-hj-suppress>{row.original.userEmail}</span>

Check warning on line 5 in src/components/Admin/Email.jsx

View check run for this annotation

Codecov / codecov/patch

src/components/Admin/Email.jsx#L5 

Added line #L5 was not covered by tests
);

Email.propTypes = {
row: PropTypes.shape({
original: PropTypes.shape({
userEmail: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
};

export default Email;
236 changes: 236 additions & 0 deletions src/components/Admin/__snapshots__/CompletedLearnersTable.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CompletedLearnersTable renders empty state correctly 1`] = `
<div
className="pgn__data-table-layout-wrapper"
>
<div
className="pgn__data-table-layout-main"
>
<div
className="pgn__data-table-wrapper"
>
<div
className="pgn__data-table-status-bar"
data-testid="table-control-bar"
>
<div
className="pgn__data-table-status"
>
<div
className="pgn__data-table-status-left"
/>
<div
className="pgn__data-table-actions-right"
>
<div
className="pgn__data-table-toggle"
/>
<div />
</div>
</div>
</div>
<div
className="pgn__data-table-container"
data-testid="data-table-container"
>
<table
className="pgn__data-table is-striped"
role="table"
>
<thead>
<tr
role="row"
>
<th
colSpan={1}
onClick={[Function]}
role="columnheader"
style={
{
"cursor": "pointer",
}
}
title="Toggle SortBy"
>
<span
className="d-flex align-items-center"
>
<span>
Email
</span>
<span
className="pgn__icon"
data-testid="arrow-drop-up-down"
style={
{
"opacity": 0.5,
}
}
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m7 10 5-5 5 5H7ZM7 14l5 5 5-5H7Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</th>
<th
colSpan={1}
onClick={[Function]}
role="columnheader"
style={
{
"cursor": "pointer",
}
}
title="Toggle SortBy"
>
<span
className="d-flex align-items-center"
>
<span>
Total Course Completed Count
</span>
<span
className="pgn__icon"
data-testid="arrow-drop-down"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m7 10 5 5 5-5H7Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</th>
</tr>
</thead>
<tbody
role="rowgroup"
/>
</table>
</div>
<div
className="pgn__data-table-empty"
>
No results found
</div>
<div
className="pgn__data-table-footer"
data-testid="table-footer"
>
<nav
aria-label="table pagination"
className="pagination-minimal"
>
<div
aria-atomic={true}
aria-live="polite"
aria-relevant="text"
className="sr-only"
>
Page 21, Current Page, of -1
</div>
<ul
className="pagination"
>
<li
className="page-item"
>
<button
aria-label="Previous, Page 20"
className="btn-icon btn-icon-primary btn-icon-md previous page-link"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="btn-icon__icon-container"
>
<span
className="pgn__icon btn-icon__icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.51 3.87 15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</li>
<li
className="page-item disabled"
>
<button
aria-label="Next, Page 22"
className="btn-icon btn-icon-primary btn-icon-md next page-link"
disabled={true}
onClick={[Function]}
tabIndex="-1"
type="button"
>
<span
className="btn-icon__icon-container"
>
<span
className="pgn__icon btn-icon__icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
`;
Loading

0 comments on commit 76d42bf

Please sign in to comment.