diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js new file mode 100644 index 0000000000..63d7f73b60 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/PaginationFooter/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Box } from '@strapi/design-system/Box'; +import { Flex } from '@strapi/design-system/Flex'; +import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin'; + +const PaginationFooter = ({ pagination }) => { + return ( + + + + + + + ); +}; + +PaginationFooter.defaultProps = { + pagination: { + pageCount: 0, + pageSize: 10, + total: 0, + }, +}; + +PaginationFooter.propTypes = { + pagination: PropTypes.shape({ + page: PropTypes.number, + pageCount: PropTypes.number, + pageSize: PropTypes.number, + total: PropTypes.number, + }), +}; + +export default PaginationFooter; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js index cf89346387..2562a9257a 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/index.js @@ -16,6 +16,7 @@ import { useFetchClient } from '../../../../../hooks'; import TableRows from './TableRows'; import tableHeaders from './utils/tableHeaders'; import ModalDialog from './ModalDialog'; +import PaginationFooter from './PaginationFooter'; const ListView = () => { const { formatMessage } = useIntl(); @@ -92,6 +93,7 @@ const ListView = () => { > + {isModalOpen && } diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js index 2cafc6fece..73624a1b56 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/index.test.js @@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event'; import { ThemeProvider, lightTheme } from '@strapi/design-system'; import { TrackingProvider } from '@strapi/helper-plugin'; import ListView from '../index'; -import TEST_DATA from './utils/data'; +import { TEST_DATA, getBigTestData } from './utils/data'; const history = createMemoryHistory(); const user = userEvent.setup(); @@ -117,4 +117,71 @@ describe('ADMIN | Pages | AUDIT LOGS | ListView', () => { await user.click(closeButton); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); + + it('should show pagination and be on page 1 on first render', async () => { + mockUseQuery.mockReturnValue({ + data: { + results: getBigTestData(15), + pagination: { + page: 1, + pageSize: 10, + pageCount: 2, + total: 15, + }, + }, + isLoading: false, + }); + + const { container } = render(App); + + const pagination = await waitFor(() => container.querySelector('nav[aria-label="pagination"]')); + + expect(pagination).toBeInTheDocument(); + expect(pagination.querySelectorAll('ul li')[1].querySelector('a')).toHaveTextContent('1'); + expect(pagination.querySelectorAll('ul li')[1].querySelector('a')).toHaveClass('active'); + }); + + it('should add the right query params when page 2 is clicked', async () => { + mockUseQuery.mockReturnValue({ + data: { + results: getBigTestData(15), + pagination: { + page: 1, + pageSize: 10, + pageCount: 2, + total: 15, + }, + }, + isLoading: false, + }); + + const { container } = render(App); + + const pagination = await waitFor(() => container.querySelector('nav[aria-label="pagination"]')); + + await user.click(pagination.querySelectorAll('ul li')[2].querySelector('a')); + expect(history.location.search).toEqual('?page=2'); + }); + + it('should show 20 elements if pageSize is 20', async () => { + history.location.search = '?pageSize=20'; + + mockUseQuery.mockReturnValue({ + data: { + results: getBigTestData(20), + pagination: { + page: 1, + pageSize: 20, + pageCount: 1, + total: 20, + }, + }, + isLoading: false, + }); + + const { container } = render(App); + + const rows = await waitFor(() => container.querySelector('tbody').querySelectorAll('tr')); + expect(rows.length).toEqual(20); + }); }); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js index f75a75ac54..12fcc9559e 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/ListView/tests/utils/data.js @@ -1,4 +1,4 @@ -const TEST_DATA = [ +export const TEST_DATA = [ { id: 1, action: 'role.create', @@ -37,4 +37,15 @@ const TEST_DATA = [ }, ]; -export default TEST_DATA; +export const getBigTestData = (quantity) => { + const data = []; + + for (let i = 0; i < quantity; i++) { + data.push({ + ...TEST_DATA[i % TEST_DATA.length], + id: i + 1, + }); + } + + return data; +};